1) Creating a flex container

{ display: flex; }

2) Put flex items in a single column

{ flex-direction: column; }

{ flex-direction: column-reverse; }

1) Align flex items to the right

{ justify-content: flex-end; }

2) Center-align flex items

{ justify-content: center;}

3) Spread out flex items

{ justify-content: space-evenly; }

{ justify-content: space-between; }

justify-content: space-around;

4) Align flex items in a second direction

{ justify-content: center; align-items: center; }

5) Align a particular flex item

.flex-container10 {justify-content: center; align-items: center;}

.three10 {align-items: flex-end};

1) Allow flex items to wrap into other rows/columns

{ flex-wrap: wrap; }

2) Reverse wrapping

{ flex-wrap: wrap-reverse; }

3) Justify position of lines of elements

{ flex-wrap: wrap; align-content: flex-start; }

1) Expand elements

.flex-item:nth-of-type(1){ flex-grow: 1;}

.flex-item:nth-of-type(2) { flex-grow: 2;}

2) Shrink elements

.flex-item:nth-of-type(1){ flex-shrink: 1;}

.flex-item:nth-of-type(2) { flex-shrink: 2;}

3) Set the size of elements

.flex-item:nth-of-type(1){ flex-basis: 200px;}

.flex-item:nth-of-type(2) { flex-basis: 10%;}

4) Put flex-grow, flex-shrink, and flex-basis together

.flex-item:nth-of-type(1) { flex: 1 0 100px; }

.flex-item:nth-of-type(2) { flex: 2 0 10%; }