Display inline-flex

[johnsicili]

The CSS property display: inline-flex; is very useful to allow the children of the box to be aligned on a vertical (and horizontal) axis and have gap controls while not stretching full width.

For example, if I wanted to create a button with an icon, it's most easily accomplished by add adding an image and text and setting the button to be inline-flex so that I can vertically align the two items and separate the two items a little.

If I were to use "flex", the button would stretch the entire width so it requires another box and more styles.

Here's the CSS doc on it: https://developer.mozilla.org/en-US/docs/Web/CSS/display#inline-flex

This is something Webflow never added, but can be a quick win for Webstudio.

[taylornowotny]

So basically, display: flex; creates a block-level container with flex layout, while display: inline-flex; creates an inline-level container with flex layout.

Sounds quite useful. I think I've had some projects in the past where I would have used this, like aligning a group of buttons inline with text.

[taylornowotny]

All we'd have to do to add this to the UI is add it to the menu of values for the Display property, right under "flex". The section UI should be the exact same as display: flex.

[kof]

adding in this order now, since we wanted block, flex as most used first, then all inline-

[
  "block",
  "flex",
  "inline-block",
  "inline-flex",
  "inline",
  "none",
]

[kof]

webstudio-is/webstudio#2141

[kof]

done, will be released in the next days