Flexbox, where nobody knows the exact size of anything

Flex keywords

initial, none, auto, <positive integer>

flex-wrap: nowrap
1x1 Lego brick 2x2 Lego brick 1x4 Lego brick 1x2 Lego brick 1x1 Lego brick 1x4 Lego brick 2x2 Lego brick 1x2 Lego brick
flex-wrap: wrap
1x1 Lego brick 2x2 Lego brick 1x4 Lego brick 1x2 Lego brick 1x1 Lego brick 1x4 Lego brick 2x2 Lego brick 1x2 Lego brick

Flexbox basics

Word
This is a sentence.
A rather short sentence.
Word
This is a sentence.
For the purposes of this example, we need a paragraph. She must have hidden the plans in the escape pod.

Free space distribution

Give me 1 unit of free space.
Give me 2 units of free space.
I'm fine, no extra space for me.
Give me 1 unit of free space.
Give me 2 units of free space.
I'm fine, no extra space for me.

Aligning flex items

1一
2二
3三
4四
5五
6六
7七
8八
9九
10十
11十一
12十二
13十三
14十四
15十五
16十六
17十七
18十八
19十九
20二十

Flexbox use-cases

Auto-margins

Boxie the Box

Navigation bar

Boxie the Box Item 1 Item 2 Item 3 End link

Card-style layout

Boxie the Box

Cards are popular?

I mean, cards are cool. Sort of. But boxes are the coolest of all.

Boxie the Box

Boxes are winning

Just look at that adorable face. Cards got nothing on that.

Boxie the Box

Boxes versus Cards

Look, coming up with non Lorem Ipsum takes brain power, of which I am lacking.

@hj_chen