The flexbox guide

Flexbox, or Flexible Box Layout, is a powerful new CSS layout mode that gives designers an efficient and simple way to lay out, align, and distribute elements in a container. It solves many layout problems that designers have been struggling to solve for a very long time—such as vertical centering, among many others.

Flexbox has a variety of settings, some of which are applied to the flex parent container (“flex container”), while others are set on its flex children (“flex items”).

Items inside a flex container can be laid out horizontally or vertically, aligned and distributed in various ways, and can be stretched or shrunk to fill the available empty space. All these options let you easily create responsive layouts.

Note: Flexbox shines when you’re creating layouts for specific subsections of your website, but can also be used for high-level page layouts.

Using flexbox layout settings on a parent container

Creating a flex container

To start using flexbox, you just need to select any block and give it the Display Setting Flex. This flex container should have one or more elements inside.

1. Add a div block or a section to the canvas and give it a class.

2. To see flexbox in action, the div block or section needs to have some child elements. Add 3 div blocks inside your container element.

3. Now it’s time to turn the parent element to a flex container. Select it and set its Display Setting to Flex. As you can see, the items inside the container are now laid out horizontally.

Changing the layout direction

By default, the Direction of a flex container is set to Row, so the child elements display horizontally. You can switch the layout to vertical by setting the Direction to Column.

Whichever direction you set on your flex container is referred to as its “main” direction, while the other direction (the one you didn’t choose) becomes its “cross” direction. So if you’re using the default settings, the main direction is horizontal, while the cross direction is vertical.

In addition to changing the direction, flexbox also lets you reverse the layout. When you check the Reverse Layout box, children of a flex container will be laid out right-to-left (if horizontal) or bottom-to-top (if vertical). This can come in handy if you want to reverse the layout on smaller screens.

Changing the alignment

Flexbox’s settings give you two rows of alignment options. Regardless of whether the direction is set to Row or Column, the first row of settings defines the horizontal alignment of flex items, while the second row defines their vertical alignment.

Alignment in horizontal layout:

Alignment in vertical layout:

Let’s see how the various alignment settings work in a horizontal flex container.

Aligning flex items along the main axis

Here are your horizontal alignment options for items inside a flex container:

1. Start: items are set toward the start of the row (left, unless you’ve reversed layout)
2. Center: items are centered within the row
3. End: items are set toward the end of the row (right, unless you’ve reversed layout)
4. Space Between: items are evenly distributed along the row
5. Space Around: items are evenly distributed along the row, with equal space on either side of each element

Aligning flex items along the cross axis

Here are your vertical alignment options for items in a flex container:

6. Start: items are aligned to the top of the row
7. Center: items are centered within the row
8. End: items are aligned to the bottom of the row
9. Stretch: items are stretched across the height of the row
10. Baseline: items are aligned to their baselines (the imaginary line that text sits on)

Wrapping children

By default, a flex container’s children will always try to fit on a single line.

You can change that by checking the Wrap Children checkbox, which allows children to wrap to a new line if necessary.

Note: this setting won’t have any effect if you haven’t set a minimum size for flex children.

Aligning multiple rows inside a flex container

Here are your options for aligning multiple rows of content within a flex container:

11. Start: rows are set toward the top of the container
12. Center: rows are vertically centered inside the container
13. End: rows are set toward the bottom of the container
14. Stretch: rows stretch to fill empty vertical space
15. Space Between: rows are evenly distributed
16. Space Around: rows are evenly distributed with equal space above and below

Note: For these options to work, you’ll need to make the flex container’s height (or width, if Direction is set to Column) bigger than the content.

Using the flex item settings

When an element is placed inside a flex container, it automatically becomes a flex item, and gets its own settings. These settings control sizing, alignment, and display order.

Applying flex sizing

Flex items can alter their width or height (depending on the container’s layout direction) to fill available space.

Webflow’s Flex Item Settings offer the top 3 presets for flex sizing, covering the most common effects, but also allow for fine-grained control over individual flex sizing properties.

Note that each flex item can have its own settings, allowing for a wide array of design options.

Flex sizing presets

1. Shrink if needed: sizes the item based on its width/height or its content. When you turn this on, the item won’t grow larger than it needs to, but may shrink to its minimum size to prevent overflow.

2. Expand: allows the item to expand to fill all available space inside its parent. If you set this on all items in a flex container, they’ll expand to take up equal amounts of empty space.

3. Don’t shrink: sizes the item based on its width/height or its content, but doesn’t allow it to shrink, even if that will cause overflow.

Presets in action:

Advanced sizing

To take full control over the sizing of a flex item, click on the Settings icon next to the Sizing presets.

The Advanced Sizing area gives you access to 3 properties that allow fine-grained control over how the item is sized:

4. Flex Grow: defines how much a flex item can grow. Enter a number (without a unit) to determine how much the flex item will grow relative to other child elements when free space inside their parent in distributed. If the value is set to 0, it won’t grow larger than it needs to.
5. Flex Shrink: defines how much a flex item can shrink, if needed. Enter a number (without a unit) to determine how much the item will shrink relative to the other children when negative free space is distributed. If the value is set to 0, it won’t shrink even in overflow situations.
6. Flex Basis: defines the default size of an element before Flex Grow and 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 item 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 items.

Note that these advanced sizing properties will override the Sizing preset.

To help you better understand how these properties work together, here are some possible values and their output:

7. Flex Grow 1, Flex Shrink 1, Flex Basis 200px: a flexible box that can grow and shrink from the basis of 200px.
8. Flex Grow 2, Flex Shrink 1, Flex Basis 200px: a flexible box that can grow twice as large as other items and shrink from the basis of 200px.
9. Flex Grow 0, Flex Shrink 0, Flex Basis 200px: a box that will be 200px and cannot grow or shrink.
10. Flex Grow 1, Flex Shrink 0, Flex Basis 200px: a flexible box that can grow bigger than 200px, but can’t shrink.

Applying individual alignments to flex children

Flex items can have their own alignment settings, which override the default alignment set by their parent flex container.

The “Aligning flex items along the cross axis” section explains these alignment options.

Changing the display order

By default, flex items display in the same order as they are placed in the source code.

To override this, you can use the Order setting, which gives you 3 preset options:

1. Auto (default): the default value, which orders items as they are in the source
2. Place First: item appears first in its flex container.
3. Place Last: item appears last in its flex container.

To use this option on a specific item, you’ll need to give it a unique class, then apply the Order.

You can also set different Order options for different screen sizes, which may come in handy when you want smartphone users to see different content than those on desktops.

Applying custom order

When you want to control the display order of several flex items, you can use the Custom Order setting.

Just click the Settings icon next to Order presets to define a Custom Order.

Custom order can be defined as a number, which specifies the order in which the flex item appears inside a flex container.

Note that flex items with the same Order Number will be laid out in the order they are placed in the source document

Examples

To see how you can use flexbox to create real-world web design patterns, check out Webflow’s visual flexbox builder, which has a variety of examples of flexbox in action. You can open the page in the Webflow Designer to inspect the settings applied to each example and get a better understanding of how they are designed using flexbox.

You should also play through Learn Flexbox with Webflow, a fun, 28-level interactive game that teaches you flexbox’s core principles.

And be sure to check out our flexbox layout tutorials, which showcase a dozen different ways you can use flexbox for your different layouts.