FLEXBOX

Non-Flexbox Styles

display:inline Each element is sized by its contents and displays in a single wrapping line.

1
2
3
4
5
6 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
7
8 Donec sed ultrices mauris. Curabitur ultricies felis eget leo hendrerit suscipit
9
10

display:block (default) Each element is on its own line. If no width is specified, the element spans the viewport.

1
2
3
4
5
6
7
8
9
10

display:block Each element is on its own line. If a width is specified, each element spans the specified width.

1
2
3
4
5
6
7
8
9
10

Flexbox styles

display:flex Each element is in a single horizontal (or vertical) wrapping row sized by its contents with any excess or insufficiency of space distributed according to its flex properties.

display:flex; flex-direction: row; (default) justify-content: flex-start; (default)

1
2
3
4
5
6
7
8
9
10

display:flex; flex-direction: row-reverse;

1
2
3
4
5
6
7
8
9
10

display:flex; justify-content:center;

1
2
3
4
5
6
7
8
9
10

display:flex; justify-content:flex-end;

1
2
3
4
5
6
7
8
9
10

display:flex; justify-content:space-between;

1
2
3
4
5
6
7
8
9
10

display:flex; justify-content:space-around;

1
2
3
4
5
6
7
8
9
10

display:flex; flex:1;

1
2
3
4
5
6
7
8
9
10

display:flex; flex:matching nth child;

1
2
3
4
5
6
7
8
9
10

display:flex; flex-wrap: nowrap; (default)

1
2
3
4
5
6
7
8
9
10

display:flex; flex-wrap: wrap;

1
2
3
4
5
6
7
8
9
10

display:flex; align-items:stretch;

1
2
3
4
5
6
7
8
9
10

display:flex; align-items:center;

1
2
3
4
5
6
7
8
9
10

display:flex; align-items:baseline;

1
2
3
4
5
6
7
8
9
10
y

display:inline-flex;

1
2
3
4
5
6
7
8
9
10

The following divs are styled to demonstrate flex-grow, flex-shrink, flex-basis.
The properties flex-grow, flex-shrink, flex-basis can be short-handed to {flex:1 2 3;}. Or {flex:1;} = flex-basis. Or {flex:1 3;} = flex-grow, flex-basis.

{display:flex; width: auto; (default)} flex-grow: matches nth-child; flex-shrink: 1; (default), flex-basis 0% (default):

1
2
3
4
5
6
7
8
9
10

{display:flex; flex-wrap: wrap; width: auto;} (default) flex:1 1 100px;

1
2
3
4
5
6
7
8
9
10

{display:flex; width: 90%;} flex:1 nth-child 100px;

1
2
3
4
5
6
7
8
9
10

:nth-child(1) {flex:1 1 min-content;} :nth-child(2) {flex:2 2 min-content;}

1
20
300
4000
50000
600000
7000000
80000000
900000000
100000000

:nth-child(1) {flex:2 2 20rem;} :nth-child(2) {flex:1 1 10rem;}
By setting proportional flex-grow, shrink, basis, flex cells will tend to line up vertically

1
2
3
4
5
6
7
8
9
10

display:flex; flex-direction:column

1
2
3
4
5
6
7
8
9
10

display:flex; flex-direction:column-reverse

1
2
3
4
5
6
7
8
9
10

display:flex; flex-direction:column; justify-content:center;

1
2
3
4
5
6
7
8
9
10

display:flex; flex-direction:column; justify-content:flex-end;

1
2
3
4
5
6
7
8
9
10

display:flex; flex-direction:column; justify-content:space-between;

1
2
3
4
5
6
7
8
9
10

display:flex; flex-direction:column; justify-content:space-around;

1
2
3
4
5
6
7
8
9
10

display:flex; flex-direction:column; flex:1;

1
2
3
4
5
6
7
8
9
10

display:flex; flex-direction:column; flex:matching nth child;

1
2
3
4
5
6
7
8
9
10

display:flex; flex-direction:column; align-items:stretch;

1
2
3
4
5
6
7
8
9
10

display:flex; flex-direction:column; align-items:center;

1
2
3
4
5
6
7
8
9
10

display:flex; flex-direction:column; align-items:baseline;

1
2
3
4
5
6
7
8
9
10
y

display:inline-flex; flex-direction:column

1
2
3
4
5
6
7
8
9
10

display:flex; flex:1; with child elements

1
1b
2
3
3b3c
3e3f
3ghc
4
5
6
7
8
9
10