flex box

Flex box (or just flex) provides a very useful and logical method of layout. with it, you gain a great deal of control. Properties can be applied to both the parent element and child elements.

parent properties

display: flex;
Creates the flex container. Can also use inline-flex.
flex-direction: row | row-reverse | columnn | column-reverse
Rows, left to right or right to left, or columns, top to bottom or bottom to top.
flex-wrap: wrap | no-wrap | wrap-reverse
How child elements wrap (or not).
flex-flow: <flex-direction> || <flex-wrap>;
Shorthand for the previous two properties.
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
Determines distribution of any horizontal (extra) space in the container. Pretty much self-explanatory.
align-items: flex-start | flex-end | center | stretch | baseline;
Like justify-content, but on the vertical axis, for the current line.
align-content: flex-start | flex-end | center | stretch | space-between | space-around;
Like justify-content, but on the vertical axis, for multiple lines.

child properties

order: <integer>;
Children, by default, go by source order, but order can be used to change that. Children appear in the order given by number, lowest ot highest.
flex-grow: <number>;
Gives childre the ability to grow, with the number being a proportion. If all are given a value of 1, they will be he same width. A value of 2 will attempt to double the value of 1…
flex-basis: <length> | auto; /* default auto */
Defines the default size of the elements.
flex: none | [<flex-grow> <flex-shrink>] || <flex-basis>;
Shorthand (recommended) for grow or shrink and basis.
align-self: auto | flex-start | flex-end | center | stretch | baseline;
Provides an override for default alignment for individual elements.