Flex container and child layout settings

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
This video features an old UI. Updated version coming soon!

Once you change the layout setting of a parent element to flex, you’ll have a number of layout options for both the flex container, or parent element, and the flex children within it.

Layout direction

The direction of a flex container is set to horizontal by default. You can switch the direction to vertical in the flex layout settings.

Layout alignment

Flex container alignment

To change the alignment of flex children within a flex container, select the flex container and select your desired alignment under the layout direction settings.

Horizontal alignment options

To align child elements horizontally, select one of the following alignment options:


  • Start - items are left aligned
  • Center - items are centered
  • End - items are right aligned
  • Space between - items are evenly distributed from edge to edge
  • Space around - items are evenly distributed along between elements and edges
Flexbox in Webflow

Vertical alignment options

To align flex children vertically, select one of the following alignment options:


  • Start - items are aligned to the top
  • Center - items are centered vertically
  • End - items are aligned to the bottom
  • Stretch - items are stretched across the height of the flex container
  • Baseline - items are aligned to their baselines (the invisible line that text sits on)


Flexbox in Webflow

Reversing the layout direction

You can reverse the alignment of your flex container layout in the direction settings.


Reversing the layout of your flex container is especially useful when it’s necessary to reverse layouts on smaller breakpoints.

Wrapping Children

By default, flex children will always try to fit on a single line. You can change that by wrapping the children in the layout settings.



There are different options for aligning multiple rows of content horizontally:


  • Start - rows are aligned to the top of the flex container
  • Center - rows are vertically centered inside the flex container
  • End - rows are aligned to the bottom of the container
  • 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
Flexbox in Webflow

Flex child layout settings

A flex child is the direct child of any flex container, any element that has its display layout set to flex. The default layout of flex children is based on the flex layout set on the flex container.


To configure the layout for a flex child within the flex container, select the element and change the sizing, alignment, and display order.  



Changing the size of a flex child

With the main sizing presets, you can tell the flex child how it should stretch in the flex container. Each flex child can have its own size settings, allowing for a wide array of layout options:


  1. Shrink flex child if needed (to prevent overflow)
  2. Grow flex child if possible
  3. Don’t shrink or grow flex child
  4. Customize grow and shrink behavior


If you choose to customize the grow and shrink behavior of an element, you’ll enter a number to determine how much the flex child will shrink or grow relative to other child elements.

 

Set the grow value to define how much a 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.


Set the shrink value to define 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.


Set the basis value to define 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 set to a specific dimension, the content or width/height of an element will be ignored before distributing size between flex children.

Changing the order of a flex child

Reordering flex children comes in handy when you want mobile device users to see different content than users on desktop devices. By default, flex children display in the same order as they are placed in the source code. To override this, you can use the order setting presets or the custom order option.

.

Flex child order settings:

  1. Don’t change: keep the flex child in its default place
  2. First: the flex child appears first in the flex container
  3. Last: the flex child appears last in the flex container
  4. Customize order: control the display order of several flex children by defining a custom order value.
Flexbox in Webflow

Custom order can be defined as a number, which specifies the order in which the flex child appears inside a flex container. Flex children with the same custom order value will be laid out in the order they are placed originally.


When using custom order, do not use the presets to specify the first or last element in your list.  “First” sets the order of the flex child to -1, and “Last” sets the order to 1. When using custom order, any number greater than 1 will place the element after any element with order set to last. Any number smaller than -1 will place the element before any element set to first.