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
ordercan 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.