Flexbox, also known as flex or flexible box layout, lets you align elements in a box. Flexbox offers layout control in 1 dimension — either vertically or horizontally. It is a display setting, which means you can set flexbox on other elements.
In this lesson, you’ll learn about:
Flex parents and children
When you set flexbox on an element, you typically set it on a parent element, so you have control over the alignment of children elements. A parent element using flexbox is also known as the “flex parent.” A direct child element of a flex parent is also known as a “flex child.”
You can create a flex parent out of any element that contains other elements. To create a flex parent:
- Select the element (e.g., section, div block) on the canvas
- Go to Style panel > Layout
- Choose flex in Display
Unlike other display settings, enabling flex on a parent element does affect the layout of the direct children elements. By default, children align left and stack horizontally when you enable flexbox on a parent element. You can adjust this display in flex parent settings.
Note: Elements set to flexbox won’t affect the layout of the children within their direct, child elements.
Flex parent settings
Once you set flexbox on a parent element, you’ll have a number of layout options for the flex parent and its child elements.
- Direction
- Align
- Justify
- Gap
- Wrap
Set or reverse the direction
By default, flex parents are set to a horizontal direction. To switch the direction, select the flex parent and go to Style panel > Layout > Direction and choose either horizontal or vertical.
You can reverse the direction of your flex parent by going to Style panel > Layout > Direction and clicking the Reverse icon. This flips the order of your elements, so the first element is now last, the second element is now second to last, etc. Reversing the flex parent’s direction is useful for right-to-left sites or when designing on smaller breakpoints.
Note: If you reverse the direction of your flex parent, the position of flex children in the document order doesn’t change. This means that the visual order and DOM order of elements won’t match, which can be confusing for site visitors.
Set the vertical alignment of flex children
To change the vertical alignment of flex children, select the flex parent, then go to Style panel > Layout > Align. Then, select one of the following alignment options:
- Start — flex children are aligned to the top
- Center — flex children are centered vertically
- End — flex children are aligned to the bottom
- Stretch — flex children are stretched across the height of the flex parent
- Baseline — flex children are aligned to their baselines (i.e., the invisible line that text sits on)
Set the horizontal justification of flex children
To change the horizontal justification of flex children, select the flex parent, then go to Style panel > Layout > Justify. Then, select one of the following justification options:
- Start — flex children are left-aligned
- Center — flex children are centered
- End — flex children are right-aligned
- Space between — flex children are evenly distributed from edge to edge
- Space around — flex children are evenly distributed between elements and edges
Add gaps between child elements
Gaps let you specify the space between flex child elements without having to add margin or padding. To adjust the gap size between columns and rows, select the flex parent and go to Style panel > Layout > Gap.
By default, gaps between columns and rows are locked. This means that if you change the gap size for columns, the gap size for rows automatically adjusts to the same number. To independently adjust the gap between columns and rows, click the “lock” icon to unlock them.
Pro tip: To quickly increase or decrease gap sizes, hold down Option (on Mac) or Alt (on Windows) and drag your mouse left or right over the columns or rows gap field.
Note: Your choice of “locked” or “unlocked” gaps persists across the Designer for your browser. If you choose to lock or unlock gaps, this choice will also affect the locked or unlocked state of your grid gaps, and vice versa.
Wrap children
By default, flex children will try to fit on a single line. You can change that by wrapping the children. Go to Style panel > Layout > Wrap and select wrap.
When you wrap children, you’ll have other options for aligning multiple rows of content horizontally:
- Start — rows are aligned to the top of the flex parent
- Center — rows are vertically centered inside the flex parent
- End — rows are aligned to the bottom of the flex parent
- Stretch — rows stretch to fill empty vertical space
- Space between — rows are evenly distributed from top to bottom edges
- Space around — rows are evenly distributed between other rows and edges
You can also reverse wrap children by going to Style panel > Layout > Wrap and clicking the “reverse wrap” icon.
Flex child settings
The default layout of flex children is based on the flex layout settings set on the flex parent. However, you can override these settings for a flex child:
- Size
- Alignment
- Order
Change the size of a flex child
You can adjust the sizing of a flex child by selecting the child, then going to Style panel > Flex child > Sizing. There are 4 options for sizing:
- Shrink flex child if needed (to prevent overflow)
- Grow flex child if possible
- Don’t shrink or grow flex child
- Custom grow and shrink behavior
If all flex children are set to either Grow if possible, Shrink if needed, or Don’t shrink or grow, any remaining space after they have been sized will be distributed evenly to the children set to Grow if possible.
Shrink if needed
Shrink if needed lets you size a flex child based on its width and height properties (or the content inside the flex child, if width and height are not set). This makes the flex child inflexible when there is free space left but allows it to shrink to its minimum when there is not enough space.
Grow if possible
Grow if possible lets flex children grow if there is space to do so. This lets the flex children absorb any extra space in the flex parent.
Don’t shrink or grow
Don’t shrink or grow lets you size the flex child according to its width/height properties, and makes it fully inflexible. The flex child is not allowed to shrink, even in an overflow situation.
Customize grow and shrink behavior
You can also choose to fully customize the grow and shrink behavior of a child element. This determines how much the flex child shrinks or grows relative to other child elements in the flex parent.
The Grow value defines how much the flex child can grow relative to other child elements when free space inside the parent element is distributed. If the value is set to 0, it won’t grow larger than it needs to.
The Shrink value defines how much a flex child can shrink relative to other children when negative free space is distributed. If the value is set to 0, it won’t shrink, even in overflow situations.
The Basis value determines the default size of an element before flex-grow or flex-shrink come into play. You can set this to a specific dimension (e.g., 20%, 250px, etc.) or Auto. If set to Auto, the default size of a flex child will be based on its width or height — if set — or its content. If the basis value is set to a specific dimension, the content or width/height of an element will be ignored and the flex child will share the size with other flex children.
Change the alignment of a flex child
You can adjust the alignment of a flex child by selecting the child, then going to Style panel > Flex child > Align. There are 6 options for alignment:
- Auto
- Top
- Center
- Bottom
- Stretch
- Baseline
Note: You can also use auto margin to align flex children.
Change the order of a flex child
By default, flex children display in the order that they are placed in the source code (you can view this order in the Navigator). But reordering flex children comes in handy if you want to adjust your design on different breakpoints.
To override the default order of a flex child, select the child and go to Style panel > Flex child > Order. There are 6 options for ordering:
- Don’t change — keep the flex child in its default place
- Make first — the flex child appears first in the flex parent
- Make last — the flex child appears last in the flex parent
- Customize order — control the display order of several flex children by defining custom order values
You can define custom order with a number, which specifies the order in which the flex child appears inside the flex parent. Flex children with the same custom order value are laid out in the order they were originally placed.
When using custom order, don’t use Make first or Make last to specify the first or last child elements. Make first sets the flex child’s order to -1, and Make last sets the flex child’s order to 1. When using custom order, any number greater than 1 will place the flex child after any flex child with order set to Make last. Any number smaller than -1 will place the flex child before any element set to Make first.
Note: If you change the order of flex children, their position in the document order doesn’t change. This means that the visual order and DOM order of elements won’t match, which can be confusing for site visitors.
Learn more:
