Flexbox

Some flexbox examples for myself and anyone interested.
Resize the window often for best experience.

Contents:
Flex-direction, Flex-wrap, Flex-flow
Justify-content
Align-items, Align-content
Flex-item properties

Recommended read: A Complete Guide to Flexbox (CSS-Tricks)

Flex-direction, Flex-wrap, Flex-flow

/* Container */
display: flex; flex-direction: row;
flex-item 1
flex-item 2
flex-item 3
flex-direction: row-reverse;
flex-item 1
flex-item 2
flex-item 3
flex-direction: column;
flex-item 1
flex-item 2
flex-item 3
flex-direction: column-reverse;
flex-item 1
flex-item 2
flex-item 3
/* Container */
display: flex;
flex-direction: row; /* Flex-item */
width: 45.5%; /* Container without flex-wrap value */
flex-item 1
flex-item 2
flex-item 3
/* Container */ flex-wrap: wrap;
flex-item 1
flex-item 2
flex-item 3
/* Shorthand */ /* Flex-item */
width: 45.5%; /* Container */
flex-flow: row wrap;
flex-item 1
flex-item 2
flex-item 3
flex-flow: row-reverse nowrap;
flex-item 1
flex-item 2
flex-item 3

Justify-content back to top

/* Container */
display: flex;
flex-direction: row; justify-content: flex-start;
flex-item 1
flex-item 2
flex-item 3
justify-content: flex-end;
flex-item 1
flex-item 2
flex-item 3
flex-direction: row-reverse;
justify-content: flex-end;
flex-item 1
flex-item 2
flex-item 3
justify-content: center;
flex-item 1
flex-item 2
flex-item 3
justify-content: space-around;
flex-item 1
flex-item 2
flex-item 3
justify-content: space-between;
flex-item 1
flex-item 2
flex-item 3

Align-items, Align-content back to top

/* Container */
display: flex;
flex-direction: row; /* Default, no need to declare */
align-items: stretch;
flex-item 1
this is taller :)
flex-item 2
this is
much
taller
flex-item 3
align-items: flex-start;
flex-item 1
this is taller :)
flex-item 2
this is
much
taller
flex-item 3
align-items: flex-end;
flex-item 1
this is taller :)
flex-item 2
this is
much
taller
flex-item 3
align-items: center;
flex-item 1
this is taller :)
flex-item 2
this is
much
taller
flex-item 3
align-items: baseline;
flex-item 1
this is taller :)
flex-item 2
this is
much
taller

flex-item with title

/* For multiple lines of items */
flex-flow: row-wrap;
min-height: 180px; /* Default, no need to declare */
align-content: stretch;
flex-item 1
...
flex-item 2
flex-item 3
flex-item 4
flex-item 5
flex-item 6
flex-item 7
flex-item 8
flex-item 9
flex-item 10
align-content: flex-start;
flex-item 1
...
flex-item 2
flex-item 3
flex-item 4
flex-item 5
flex-item 6
flex-item 7
flex-item 8
flex-item 9
flex-item 10
align-content: flex-end;
flex-item 1
...
flex-item 2
flex-item 3
flex-item 4
flex-item 5
flex-item 6
flex-item 7
flex-item 8
flex-item 9
flex-item 10
align-content: center;
flex-item 1
...
flex-item 2
flex-item 3
flex-item 4
flex-item 5
flex-item 6
flex-item 7
flex-item 8
flex-item 9
flex-item 10
align-content: space-between;
flex-item 1
...
flex-item 2
flex-item 3
flex-item 4
flex-item 5
flex-item 6
flex-item 7
flex-item 8
flex-item 9
flex-item 10
align-content: space-around;
flex-item 1
...
flex-item 2
flex-item 3
flex-item 4
flex-item 5
flex-item 6
flex-item 7
flex-item 8
flex-item 9
flex-item 10

Flex-item properties back to top

/* Flex-item */ /* Default */
order: 0;
flex-item 1
flex-item 2
flex-item 3
order: 1;
flex-item 1
flex-item 2
flex-item 3
order: -1;
flex-item 1
flex-item 2
flex-item 3
flex-grow: 2;
flex-grow: 1;
flex-grow: 2;
flex-grow: 1;
flex-shrink: 1;
flex-shrink: 1;
flex-grow: 1;
flex-grow: 1;
/* Shorthand: grow, shrink, basis */
flex: 3 1 auto;
flex: 3 1 auto;
flex-item 2
flex-item 3
/* Container */
min-height: 180px; /* Flex-item */
/* align-self: flex-start | flex-end | center | baseline | stretch */
align-self: flex-start;
flex-item 2
align-self: flex-end;
align-self: flex-center;