Flexible Box Module is a method to layout, distribute and align items in a container with CSS.
Flex container
display: flex;
flex-direction: row (left to right) or column (top to bottom)
flex-wrap: nowrap (all items on one line) or wrap (flex items will wrap onto multiple lines from top to bottom)
flex-flow: column wrap; (short hand for flex-direction and flex-wrap)
justify-content: (determines alignment along the main axis) flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right;
align-items: (how items are laid out along the cross axis on the current line) stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
align-content: (aligns a flex container's lines) flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
gap, row-gap, column-gap: (controls space between flex items)Flex items
order: controls the order in which the item appears (by default appears by the source order)
flex-grow: a unitless value that serves as proportion determining space the item should take up
flex-shrink: defines the ability for an item to shrink if necessary
flex-basis: default size of an element before remaining space is distributed
flex: shorthand for flex-grow flex-shrink and flex-basis
align-self: (allows the default alignment to be overridden for individual flex items) auto | flex-start | flex-end | center | baseline | stretch;