Flexbox Reference

display: flex; # enable flexbox
flex-direction: row; # horizontal layout
flex-direction: column; # vertical layout
flex-wrap: wrap; # allow wrapping
flex-wrap: nowrap; # single line
flex-flow: row wrap; # shorthand

justify-content: flex-start; # start of container
justify-content: flex-end; # end of container
justify-content: center; # center items
justify-content: space-between; # equal space between
justify-content: space-around; # equal space around
justify-content: space-evenly; # equal spacing

align-items: stretch; # fill container height
align-items: flex-start; # top alignment
align-items: flex-end; # bottom alignment
align-items: center; # vertical center
align-items: baseline; # text baseline align
align-content: space-between; # multi-line spacing

flex-grow: 1; # expand to fill space
flex-shrink: 0; # prevent shrinking
flex-basis: 200px; # initial size
flex: 1 0 auto; # grow shrink basis
order: 2; # change visual order
align-self: center; # override align-items

# Center everything
display: flex;
justify-content: center;
align-items: center;

# Equal width columns
.item { flex: 1; }

# Sticky footer
min-height: 100vh;
flex-direction: column;