Join the Webstudio community

Updated 2 months ago

Setting Flexible Element Sizes in Webstudio

At a glance

The community member is asking if Webstudio has an option to set an element's size using the CSS flex property, such as flex:1 or flex:2, in order to achieve relative sizing between elements. The comments suggest using CSS variables for relative sizing, and mention the Craft feature in Webstudio. One community member provides a code example to help explain the issue. Another community member confirms that the flex property can be used to achieve the desired effect, and the discussion turns to the naming convention used in Webstudio for this feature.

Useful resources
has webstudio somewhere an option to set an element to "flex:1", "flex2" etc? What I want to achive is setting abstract sizes on elements. I want a child to be 2x bigger than the rest.
J
O
M
13 comments
Sounds like a couple things youre asking about.

relative sizing: realtive to what? Screensize? Use vw. Font size? Use rem/em.

setting them: CSS variables can keep it all in sync. Eg --gap-l can be your value for gaps
Hmm sorry I think I didn't explain it good enough. I hope this little example helps:
I am searching an option in the editor to set the css property "flex:x;" per Element.
Flex is shorthand for the properties shown in the attachment.

So add flex to the parent, then youll see Flex Child show up on the child instance
Attachment
image.png
perfect, thats what I was looking for!
why did we copy the webflow name "sizing" instead of "Flex"?
now that I look at it from that angle where user with css knowledge can't find it, it doesn't make sense
I think sizing is more understandable for normal users. But I don’t think they will be able to use it without a basic knowledge of flex.
All our labels are aligned with css otherwise, this one is made up
Add a reply
Sign up and join the conversation on Discord