About flexbox

Flexbox (Fluid Layout) - Google Web Designer

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 in order to optimize 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 checkbox. The current parent element becomes the flex container, and flexbox properties become available in the Responsive panel.

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 is 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	Behavior	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	Behavior
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	Behavior
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.
center	Flex items are centered 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	Behavior
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.
center	Flex items are centered 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	Behavior
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	Behavior
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.
center	Rows or columns are centered 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	Behavior
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.
center	The flex item is positioned at the center 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 the 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 in order 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.