Introduction to Flexbox

Instructions: Click on the "CSS" button in each example to see the wonderful code behind the example.

Can I even use Flexbox?

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

Normal Block Elements

See the Pen Flexbox Lab 1 by Turing School of Software and Design (@turing) on CodePen.

What happens if we turn on Flexbox?

See the Pen Flexbox Lab 2 by Turing School of Software and Design (@turing) on CodePen.

What if we make the elements too big to fit?

See the Pen Flexbox Lab 3 by Turing School of Software and Design (@turing) on CodePen.

Flexbox makes them fit.

The flex Property

See the Pen Flexbox Lab 4 by Turing School of Software and Design (@turing) on CodePen.

All of them fit, but some—like #5—fit more than others.

justify-content: center

See the Pen Flexbox Lab 5 by Turing School of Software and Design (@turing) on CodePen.

align-items: center

See the Pen Flexbox Lab 6 by Turing School of Software and Design (@turing) on CodePen.

justify-content: center with align-items: center

See the Pen Flexbox Lab 7 by Turing School of Software and Design (@turing) on CodePen.

flex-direction: row-reverse

See the Pen Flexbox Lab 8 by Turing School of Software and Design (@turing) on CodePen.

flex-direction: column

See the Pen Flexbox Lab 9 by Turing School of Software and Design (@turing) on CodePen.

flex-direction: column-reverse

See the Pen Flexbox Lab 10 by Turing School of Software and Design (@turing) on CodePen.

flex-wrap: wrap

See the Pen Flexbox Lab 11 by Turing School of Software and Design (@turing) on CodePen.

flex-wrap: wrap-reverse

See the Pen Flexbox Lab 12 by Turing School of Software and Design (@turing) on CodePen.

Wrapping with a Percentage for the Width

See the Pen Flexbox Lab 13 by Turing School of Software and Design (@turing) on CodePen.

Wrapping and Justifying Content

See the Pen Flexbox Lab 14 by Turing School of Software and Design (@turing) on CodePen.

justify-content: space-between

See the Pen Flexbox Lab 15 by Turing School of Software and Design (@turing) on CodePen.

justify-content: space-around

See the Pen Flexbox Lab 16 by Turing School of Software and Design (@turing) on CodePen.

Order

See the Pen Flexbox Lab 18 by Turing School of Software and Design (@turing) on CodePen.

align-content

See the Pen Flexbox Lab 19 by Turing School of Software and Design (@turing) on CodePen.

Practice Time

See the Pen Flexbox Practice by Turing School of Software and Design (@turing) on CodePen.

Your mission: Open the example above in Code Pen. What kind of layouts can you implement using Flexbox?