Coming soon: updated Flexbox UI

Announcements Updates
1

Hi everyone! I wanted to let you know that we’ll be pushing an update to the Flexbox UI in the coming days. The changes make the UI simpler and more intuitive for new and existing users. I’ll outline all the changes below:

Updates to Flex Container UI

The horizontal and vertical direction buttons are moved into its own row, above the distribution and alignment actions/icons. Choosing the direction is usually the first and most important action, so it deserves a more dedicated space. This layout also gives all the buttons more breathing room so its easier to understand at a glance.

816×460 40 KB

Updates to Flex Item UI

There are a couple big changes we made here.

  1. We moved the Flex Item section above the Display Settings section. It’s more specific to the selected element so it should be higher in the list. We will be following this pattern for all of our components as well.
  2. Flex item alignment and order overrides will be hidden under a checkbox. They shouldn’t be used often so we’re hiding the UI more. Simplifying this section also helps to differentiate Flex Item settings from Flex Container settings.
  3. You can hover over the icon on the left of the Flex Item label to view the Flex Container on the canvas. Clicking on this icon will take you to the Flex Container where you can edit the layout. We will be applying a similar pattern for other components that have a parent-child relationship.

816×614 47.4 KB

We think you’ll enjoy building Flexbox layouts even more after these changes. Let us know what you think!

26 Likes
2

@thesergie those are some really sensible, well thought through, changes.

It’s encouraging to see that you’re not just adding new features but also continuously improving what you already shipped. By having a great UI for flexbox in the first place, you already differentiated from pretty much all other players on the market. Fortunately for us, you don’t define yourself in relation to the competition, but to your own impeccable standards. :pray:

8 Likes
3

Nice!, And oh, big up for making the resets 1 click away.

1 Like
4

Don’t forget to update flexboxgame and flexbox microsite screenshots…

6 Likes
5

Looks nice! Can’t wait for a first hands-on :slight_smile:

6

Looks great @thesergie! :smiley:

7

its nice to see these Updates coming! gj :slight_smile:

8

@thesergie Hey, just noticed that the Custom/Gear-icon setting for Flexbox has a slider for Grow & Shrink. I’ve treated these pretty much as booleans in the old UI, what does setting it to e.g. 10 mean? :thinking:

9

Hey @Simon_Lessing!

Values for flexbox grow and shrink define a ratio between each element. Example, if you had following setup:

<div class="flexcontainer">
  <div class="first-child"></div>
  <div class="second-child"></div>
</div>

and then you set:

.first-child {
  flex-grow: 2;
}
.second-child {
  flex-grow: 1;
}

Will result in the .first-child element being twice as big as the .second-child element.
http://flexbox-grow-shrink.webflow.io/

Let me know if that answers your question :slight_smile:
Cheers,
Bart

4 Likes
10

Hey, only saw this now - thank you so much for the extensive explanation! Floxbox is a bit hairy… :wink:

1 Like