CSS3 Flexbox

display: flex; # enable flexbox
flex-direction: row | column; # main axis direction
flex-wrap: wrap | nowrap; # wrap items
justify-content: center; # align on main axis
align-items: center; # align on cross axis

justify-content: flex-start; # align to start
justify-content: flex-end; # align to end
justify-content: center; # center items
justify-content: space-between; # space between items
justify-content: space-around; # space around items

align-items: flex-start; # align to start
align-items: flex-end; # align to end
align-items: center; # center items
align-items: stretch; # stretch to fill
align-items: baseline; # align baselines

flex-grow: 1; # grow factor
flex-shrink: 1; # shrink factor
flex-basis: 200px; # initial size
flex: 1 1 200px; # shorthand (grow shrink basis)
align-self: center; # override align-items

gap: 20px; # space between items
row-gap: 20px; # vertical gap
column-gap: 20px; # horizontal gap