CSS sizing: content-based units

This is a div sized with min-content.
This is a div sized with max-content.
This is a div sized with fit-content(200px).

Support for these content-based units is most comprehensive in the grid formatting context, so this example should showcase the respective values correctly in a browser that supports Grid.

This is a p element sized with min-content.

This is a p element sized with max-content.

This is a p element sized with fit-content(300px).

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 more popular than cards

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.

Grid basics

Item A
Item B
Item C
Item D
Item E
Item F

Grid auto-sizing

Item A
Item B
Item C
Item D
Item E
Item F

Flexible sizing

Do we still like boxes?
Do we still like boxes?
Do we still like boxes?
Do we still like boxes?
Do we still like boxes?
Do we still like boxes?
Do we still like boxes?
Do we still like boxes?
Do we still like boxes?
Do we still like boxes?
Do we still like boxes?
Do we still like boxes?
Do we still like boxes?
Do we still like boxes?
Do we still like boxes?
Do we still like boxes?
Do we still like boxes?
Do we still like boxes?
Do we still like boxes?
Do we still like boxes?
Do we still like boxes?
Do we still like boxes?
Do we still like boxes?
Do we still like boxes?
Do we still like boxes?
Do we still like boxes?
Do we still like boxes?

Line-based placement

🍏

🍊

🥥

🥑

🍇

🍌

Naming grid areas

Item A
Item B
Item C

Aligning grid items

A
B
C
D