Flexbox
Align and control your layouts with incredible precision.
-
Flex parents and children -
Flex parent settings -
Flex child settings
Flex parents and children
-
Select the element (e.g., div) on the canvas -
Click on Flex under Layout in the styling panel .
Elements set to flexbox won’t affect the layout of the children within their direct child elements.
Flex parent settings
-
Direction -
Alignment -
Gap -
Wrap -
Padding
Set or reverse the direction
![Choose column, row, or switch direction to change the layout of your flexbox.](http://images.ctfassets.net/lizv2opdd3ay/fXrciX1DHZRFfiwxLDrjR/46f9944ffc07753f45686ffe79e4c586/Group_1.webp)
If you reverse the direction of your flex parent, the position of flex children in the document order doesn’t change.
Column layout
Column layout - Switched
Row layout
Row layout - Switched
Mind the gap
To wrap or not to wrap
-
nowrap -
wrap -
wrap-reverse
![Wrapped content automatically moves to the next line, when the content hits the edge.](http://images.ctfassets.net/lizv2opdd3ay/5vWQA0iz59OUpaY0lyUqqH/c085635622e9a337394adb8dc4e6abfe/Flexbox_wrap.webp)
-
Left to right -
Right to left -
Top to bottom -
Bottom to top
Alignment
You can double-click on the alignment box to shrink or grow content.
Row layout direction
![You can stretch the row layout by double-clicking on the 3x3.](http://images.ctfassets.net/lizv2opdd3ay/5QpLzLJzEgKbeROj6ceI4Y/7f322fb937f97aa635162bbf428acd06/Group_10.webp)
Column layout direction
![You can stretch the column layout by double-clicking on the 3x3.](http://images.ctfassets.net/lizv2opdd3ay/3ZcB8SxykTBYytvHeWExfo/c4d0741d9c5c4e4dbfca8b269faad1f5/Group_9.webp)
Padding
-
Inner horizontal padding (Add space between the top and bottom of elements) -
Inner vertical padding (Add space between the left and right of elements) -
Individual control (Add space between each of the four sides)
![Add spacing to elements in a Flexbox](http://images.ctfassets.net/lizv2opdd3ay/60Xrm1sv1p0IZ4ykX0CuTL/c2f5f8281b853fbb5db1b37727cc255f/Group_14.webp)
Flex child settings
-
Size -
Alignment -
Spacing -
Order
Making children "flex"
-
Flex -
Shrink -
Grow child -
None
Flex
Shrink
Grow
None
Customize grow and shrink behavior.
Alignment of flex children.
Spacing
This is also the place where you can set the z-index. The z-index property sets the z-order of an element and its descendants or flex and grid items. Overlapping elements with a larger z-index cover those with a smaller one. A z-index value of 1 will sit on top of one with 0, and an element with 10 will sit on top of both 0 and 1.
How to order flex children