Intro to flexbox

Flexbox gives you precise alignment and stacking control for all the contents inside an element, solving many layout problems that designers struggle with.

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!
This video features an old UI. Updated version coming soon!

Flexbox, also know as flex or flexible box layout, is a powerful layout tool that gives you precise alignment and stacking control for all of the contents inside of an element.


Flexbox allows you to control the alignment of elements in a box in any way you’d like — solving complex layout problems that designers have been struggling with for years.


In this introduction, we’ll cover:


  1. Flex containers
  2. Flex children  

Flex containers

The flex container is the parent element. You can create a flex container out of any element that already has elements inside of it. To create a flex container out of an element, select the element and set the display setting to flex.


Unlike other display settings, enabling flex on a parent element will affect the layout of the direct children elements inside of it. When you enable the flex display setting for a parent element, the children of that parent element align to the left and stack horizontally by default.

Flexbox in Webflow

Flex containers will not affect or change the layout of the children within their direct, child elements.

Flex children  

Once you’ve created a flex container out of a parent element, the direct children of that element become flex children.


To add to or override the layout settings for a flex child, select the element and adjust the layout settings.


For more detail on the alignment and layout options with flexbox, check out:


  1. Flex layout settings
  2. Centering elements with flexbox
  3. Building equal-height layouts with flexbox
  4. The flexbox game

Browser support

Can I Use flexbox? Data on support for the flexbox feature across the major browsers from caniuse.com.