Flexbox (CSS Flexible Box Layout) is a way to flexibly arrange elements in a container (called the flex container). The elements within the container (called the flex items) can grow or shrink to optimise the container space while maintaining the specified ordering and spacing. You may find flexbox particularly useful if you want to align items of different sizes into rows or columns, with larger items taking up more space than smaller ones.
Flexbox settings
You can find flexbox settings in the Responsive panel, on the Flexbox tab.
Use flexbox
To use flexbox, select the Use flexbox tick box. The current parent element becomes the flex container and flexbox properties become available in the responsive panel.
Flexbox isn't available if:
- The current parent element is a text element such as
<p>or<h1>. - The current parent element contains inline elements, such as
<span>or<a>. This doesn't apply if the parent element is a page.
Any direct child elements of the flex container become flex items. (Guide layers are excluded.) The flex items are arranged along a main axis, which can be set as either horizontal or vertical. You can also configure the direction in which content flows along the axis. Because flexbox orientation and direction are changeable, properties are set to values such as 'flex-start' and 'flex-end' rather than top, bottom, left or right.
Direction
The direction determines how the flex items are arranged by setting the main axis and the flow direction along the axis.
| Direction | Behaviour | Main axis |
|---|---|---|
| row | Flex items are arranged in rows, in the direction of text flow (starting from the left for left-to-right languages such as English). |
Horizontal |
| row-reverse | Flex items are arranged in rows, in the reverse direction of text flow (starting from the right for left-to-right languages such as English). |
Horizontal |
| column | Flex items are arranged in columns, in the direction of content flow (usually starting from the top). |
Vertical |
| column-reverse | Flex items are arranged in columns, in the reverse direction of content flow (usually starting from the bottom). |
Vertical |
Spacing
The spacing sets whether flex items are spaced automatically, or using fixed distances.
| Spacing | Behaviour |
|---|---|
| Standard | Flex items are automatically arranged within the flex container according to the specified justification, wrapping and alignment settings. |
| Fixed | Flex items are arranged according to the specified child spacing and boundary spacing. |
Justification
The justification determines how flex items are arranged along the main axis. This setting is available when using standard spacing.
| Justification | Behaviour |
|---|---|
| flex-start | Flex items are packed at the starting edge of the row or column. |
| flex-end | Flex items are packed at the ending edge of the row or column. |
| centre | Flex items are centred along the main axis. |
| space-between | Flex items are spaced out evenly along the main axis, with the starting and ending items at the container's edges. |
| space-around | Flex items are spaced out evenly along the main axis, with half as much space on either end. |
| space-evenly | Flex items are spaced out evenly along the main axis, with the same amount of space on either side of the starting and ending items. |
Cross-axis alignment
The cross-axis alignment is how flex items are arranged along the cross-axis of the current row or column.
| Cross-axis alignment | Behaviour |
|---|---|
| flex-start | Flex items are placed at the starting edge of the cross axis. |
| flex-end | Flex items are placed at the ending edge of the cross axis. |
| centre | Flex items are centred along the cross axis. |
| stretch | Flex items stretch to fill the available space along the cross axis. |
| baseline | Flex items are placed along the cross axis so that their baselines are aligned. |
Wrapping
The wrapping determines whether content wraps within the container. This setting is available when using standard spacing.
| Wrapping | Behaviour |
|---|---|
| nowrap | Flex items are arranged in a single row or column. |
| wrap | Flex items can wrap to form multiple rows or columns when the flex items are too large to fit in a single line. |
| wrap-reverse | Flex items can wrap to form multiple rows or columns when the flex items are too large to fit in a single line. The cross-axis direction is reversed. |
Wrap alignment
The wrap alignment sets how rows or columns are arranged along the cross axis (which is perpendicular to the main axis) if there are multiple rows or columns in the flex container. This setting is available when using standard spacing and wrapping is enabled.
| Wrap alignment | Behaviour |
|---|---|
| flex-start | Rows or columns are packed at the starting edge of the container. |
| flex-end | Rows or columns are packed at the ending edge of the container. |
| centre | Rows or columns are centred along the cross axis. |
| stretch | Rows or columns are stretched to fill the available space along the cross axis unless they have a defined height. |
| space-between | Rows or columns are spaced out evenly along the cross axis, with the starting and ending rows or columns at the container's edges. |
| space-around | Rows or columns are spaced out evenly along the cross axis, with half as much space on either end. |
Child spacing
The distance in pixels maintained between two items in the flex container. This setting is available when using fixed spacing.
Boundary spacing
The distance in pixels maintained between outer items and the flex container. This setting is available when using fixed spacing.
Child order
Elements contained in the flexbox are listed here. To reorder them, drag items to their new position in the list.
You can also move flex items on the stage to reorder them.
Flexbox child properties
Flex items have their own properties. Select the child to view and edit its flexbox settings.
While flex items may grow or shrink in size, they respect minimum and maximum widths and heights. Their Left and Top properties are disabled, since flex items are arranged according to flexbox settings, but the translation properties can be used to offset their positions.
Cross-axis alignment
The cross-axis alignment of a flex item overrides the default cross-axis alignment set for the container.
| Cross-axis alignment | Behaviour |
|---|---|
| auto | The flex item uses the cross-axis alignment setting for the flex container. |
| baseline | The flex item's baseline is aligned with the baselines of other flex items with baseline alignment. |
| centre | The flex item is positioned at the centre of the cross axis. |
| flex-end | The flex item is positioned along the cross axis at the ending edge of the container. |
| flex-start | The flex item is positioned along the cross axis at the starting edge of the container. |
| stretch | The flex item stretches to fill the container along the cross axis unless it has a defined height. |
Flex grow
The flex-grow factor determines how much the flex item will grow to fill available space in the flex container along the main axis, in proportion to the flex-grow factors of other items in the same row or column. This setting is available when using standard spacing.
For example, if a row contains three flex items with flex-grow factors of 1, 1 and 2, the last flex item will take up twice as much of the available space in the row as each of the other flex items.
If the total of all flex-grow factors for the items in a row or column is less than 1, the flex items may not use all of the available space.
When the flex-grow factor is 0, the flex item will not grow.
Flex shrink
The flex-shrink factor determines how much the flex item will shrink to fit within the flex container along the main axis, in proportion to the flex-shrink factors of other items in the same row or column. This setting is available when using standard spacing.
For example, if a row contains three flex items with flex-shrink factors of 1, 1 and 2, the last flex item will shrink more relative to the other flex items. Flex-shrink factors take into account the size of the flex item.
When the flex-shrink factor is 0, the flex item will not shrink.