CSS Flexbox

My Tutorial/Cheatsheet
Created: 2021-05-15

Base example without flex

<span>Hello</span>
<div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
</div>
<span>World</span>

Hello
foo
foo
foo
World

Flex container basics

display: flex

<span>Hello</span>
<div style="display: flex;">
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
</div>
<span>World</span>

Hello
foo
foo
foo
World

display: inline-flex

<span>Hello</span>
<div style="display: inline-flex;">
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
</div>
<span>World</span>

Hello
foo
foo
foo
World

flex-direction: column

<span>Hello</span>
<div style="display: flex; flex-direction: column;">
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
</div>
<span>World</span>

Hello
foo
foo
foo
World

display: inline-flex; flex-direction: column

<span>Hello</span>
<div style="display: inline-flex; flex-direction: column;">
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
</div>
<span>World</span>

Hello
foo
foo
foo
World

Item relative sizing, wrapping

flex: [number]

Each item’s relative flex sizing.

Also note the 400px minimum size of the last item!

<div style="display: flex;">
    <div style="flex: 1">foo</div>
    <div style="flex: 1">foo</div>
    <div style="flex: 3">foo</div>
    <div style="flex: 3">foo</div>
    <div style="flex: 3">foo</div>
    <div style="flex: 3 400px">foo</div>
</div>

foo
foo
foo
foo
foo
foo

flex-wrap: wrap

Allow items to wrap when their minimum sizes won’t fit in the container. This is so wonderful.

If you can, try resizing your browser to see the number of items in each row change while still evenly filling the available space.

<div style="display: flex; flex-wrap: wrap;">
    <div style="flex: 100px">foo</div>
    <div style="flex: 100px">foo</div>
    <div style="flex: 100px">foo</div>
    <div style="flex: 100px">foo</div>
    <div style="flex: 100px">foo</div>
    <div style="flex: 100px">foo</div>
    <div style="flex: 100px">foo</div>
    <div style="flex: 100px">foo</div>
    <div style="flex: 100px">foo</div>
    <div style="flex: 100px">foo</div>
    <div style="flex: 100px">foo</div>
    <div style="flex: 100px">foo</div>
</div>

foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo

Containing items with fixed sizes

Our flex container can’t do much with these fixed-sized div items:

<div style="display: flex; height: 60px;">
    <div style="width: 40px; height: 20px;">foo</div>
    <div style="width: 40px; height: 20px;">foo</div>
    <div style="width: 40px; height: 20px;">foo</div>
</div>

foo
foo
foo

align-items: center

Notice how the items are now vertically centered:

<div style="display: flex; height: 60px; align-items: center;">
    <div style="width: 40px; height: 20px;">foo</div>
    <div style="width: 40px; height: 20px;">foo</div>
    <div style="width: 40px; height: 20px;">foo</div>
</div>

foo
foo
foo

justify-content: space-between

<div style="display: flex; height: 60px; justify-content: space-between">
    <div style="width: 40px; height: 20px;">foo</div>
    <div style="width: 40px; height: 20px;">foo</div>
    <div style="width: 40px; height: 20px;">foo</div>
</div>

foo
foo
foo

justify-content: space-around

<div style="display: flex; height: 60px; justify-content: space-around">
    <div style="width: 40px; height: 20px;">foo</div>
    <div style="width: 40px; height: 20px;">foo</div>
    <div style="width: 40px; height: 20px;">foo</div>
</div>

foo
foo
foo

align-items: center; justify-content: space-around

<div style="display: flex; height: 60px; align-items: center; justify-content: space-around">
    <div style="width: 40px; height: 20px;">foo</div>
    <div style="width: 40px; height: 20px;">foo</div>
    <div style="width: 40px; height: 20px;">foo</div>
</div>

foo
foo
foo

Nesting

There’s no reason a flex item can’t also be a flex container.

<div style="display: flex; height: 200px;">
    <div style="flex: 1">foo</div>
    <div style="flex: 1">foo</div>
    <div style="flex: 2; display: flex; flex-direction: column">
        <div style="flex: 1">Bar</div>
        <div style="flex: 2 20px">Bar</div>
        <div style="flex: 1">Bar</div>
        <div style="flex: 1">Bar</div>
    </div>
    <div style="flex: 1">foo</div>
</div>

foo
foo
Bar
Bar
Bar
Bar
foo

My life without flexbox

The modern Flexbox standard comes to us from around the year 2012.

I knew the ins and outs of CSS layouts with floats and positioning as support evolved in the 2000-2010 era. We made CSS do things it was NOT designed to do. It was nasty, gritty stuff.

I was so used to the IE6 Web stagnation that I did not bother learning flexbox when it first came out because I couldn’t use it "yet". Then I didn’t do much web design for about a decade.

When I finally learned flexbox a couple years ago, I couldn’t believe how good it was. This is truly the layout tool we would have killed for during the Table Layout Era and the CSS Float and Position Era after that. Seriously, those were brutal knife-fighting days. To accomplish what you can do now with display: flex; flex-wrap: wrap; back in those days would have taken you 16 hours to create and then some client with an old copy of IE would have come and taken a pint of your blood.

Sadly, I didn’t do much with flexbox designs and slowly started to forget what I’d learned.

Recently fed up with not knowing how to do proper layout in the year 2021, I’m finally making this page to relearn and give myself something to reference. I hope this series of basic examples is helpful to others as well.