Intro to flexbox

 

Flexbox (also know as flex or flexible box layout) is a very powerful layout tool that gives you precise alignment and stacking control for all the contents inside of an element. It solves many layout problems that designers have been struggling to solve for a very long time.

Here we’ll be covering some of the important concepts you’ll need to understand to master flexbox:

  • Enable flex on any element
  • Flex layout settings
  • Flex item settings

We created a flexbox game to help you learn flexbox even faster. Also check out our tutorials for centering elements with flexbox and building equal-height layouts with flexbox.

Enable flex on any element

Any element that has flex display setting enabled becomes a “flex container” and all the elements inside of it become “flex items”. You can enable it on any element with elements already inside of it.

Flexbox in Webflow
All other display settings change the layout behavior on the element itself. Flex is different in that enabling it will affect the layout of the child elements inside.

Let’s say you have a container that has 5 div blocks inside of it. This element by default has a display setting of block. After enabling the flex display setting, the child elements stack horizontally and are aligned to the left.

 
Flex layout applies only to direct children. So if you have many elements nested in each other, you can apply flex on any of those.

Flex layout settings

Flexbox in Webflow

Once an element has flex enabled, all the flex layout options appear. These settings change how the children elements, also called “flex items” will be displayed.

Changing the direction

By default, the direction of a flex container is set to horizontal. You can switch the direction to vertical at anytime.

Flexbox in Webflow

Alignment overview

The alignment options appear below the direction settings, and appear in two rows. These rows have alignment options that are connected to the direction you specified above. The top row provides alignment options for the same axis (same as direction) and the bottom row provides alignment options for the opposite axis (opposite of direction).

Notice how the top row for horizontal direction shows horizontal alignment (same axis), and the bottom row shows alignment for vertical alignment (opposite axis).

Flexbox in Webflow

Now, for vertical direction, we see that the top row is for vertical alignment (same axis), and the bottom row is for horizontal alignment (opposite axis).

Flexbox in Webflow

Alignment options

In this example, we have horizontal direction enabled. Here are the ways you can align child elements along the same axis (top row 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

Here are the ways you can align child elements along the opposite axis (bottom row 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

So, you can align any element and it’s children inside a container using the flex alignment options.

 

Reverse layout

You can easily reverse your layout. For example, if your direction is set to horizontal and you have elements aligned to the left, reversing will make them start on the right. This is especially useful when it’s necessary to reverse layouts on smaller breakpoints.

Flexbox in Webflow

Wrapping Children

By default, a the flex items 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.

Here are the different options for aligning multiple rows of content (for horizontal direction):

  • 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 item settings

By default, all the flex items (the children of the flex container) layout based on the flex layout set on the flex container. You can select any flex item and override these settings for that element (or multiple elements if they share the same class).

Flexbox in Webflow

Override sizing

Flexbox in Webflow

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

 

The sizing options include:

  • Shrink if needed - the item won’t grow larger than the content it has inside itself, but may shrink to its minimum size to prevent overflow.
  • Expand - the item will expand to fill all available space horizontally or vertically, depending on the direction. If you set this on all items in a flex container, they’ll expand to take up equal amounts of space.
  • 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.

Advanced sizing

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

Flexbox in Webflow

This gives you access to 3 properties that allow fine-grained control over how the item is sized:

  • 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.
  • 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.
  • 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.

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

  • Flex Grow 1, Flex Shrink 1, Flex Basis 200px: a flexible box that can grow and shrink from the basis of 200px.
  • 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.
  • Flex Grow 0, Flex Shrink 0, Flex Basis 200px: a box that will be 200px and cannot grow or shrink.
  • Flex Grow 1, Flex Shrink 0, Flex Basis 200px: a flexible box that can grow bigger than 200px, but can’t shrink.
Note that these advanced sizing properties will override the Sizing preset.

Override alignment

Flexbox in Webflow

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

 

Overriding order

Reordering flex items comes in handy when you want mobile device users to see different content than users on desktop devices. 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 2 presets:

  • Place First - item appears first in its flex container.
  • Place Last - item appears last in its flex container.

Advanced ordering

When you want to control the display order of several flex items, you can use the custom order setting. Click the Settings icon next to the order presets to define a custom order value.

Flexbox in Webflow

Custom order can be defined as a number, which specifies the order in which the flex item appears inside a flex container. Here’s an example:

Flexbox in Webflow

Flex items with the same custom order value will be laid out in the order they are placed originally.

Note:
Place first sets the order of the flex child to -1, and place 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 place last. And any number smaller than -1 will place the element before any element set to place first.

Pro Tip:
When using custom order, do not use the presets to specify the first or last element in your list.