Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

CSS Flexbox

6 lessonsAbout 36 minutesIntermediate

This part of the CSS Tutorial runs from Flex Container through to Flex Item Sizing. There are 6 lessons here, and working through them takes about 36 minutes at a steady pace.

It follows on from CSS Layout, so finish that first if you have not already — the examples below assume you are comfortable with it.

Each lesson below says what it covers before you open it. Read them in order the first time; afterwards this page works as a index you can jump back into when you need to check one thing.

  1. 1Flex ContainerA Flex Container is an HTML element that uses CSS Flexbox Layout to arrange and align its child elements.
  2. 2Flex DirectionThe Flex Direction property is used to define the direction in which flex items are displayed inside a flex container.
  3. 3Justify ContentThe justify-content property is used to control the horizontal alignment and spacing of flex items along the main axis of a flex container.
  4. 4Align ItemsThe align-items property is used to control the alignment of flex items along the cross axis of a flex container.
  5. 5Flex WrapThe flex-wrap property controls whether flex items should stay on a single line or wrap onto multiple lines when there is not enough space in the flex container.
  6. 6Flex Item SizingControl how individual flex items grow, shrink, reorder, align, and resolve their size against the available space. It explains flex-basis, positive and negative free space, growth, shrinkage, automatic minimum sizes, per-item alignment, and visual reordering.
All of CSS TutorialNext: CSS Grid