| display: flex; |
flex (value, not property) |
Sets an element to be a block-level flex container (on it's own line) |
| display: inline-flex |
inline-flex |
Sets an element to be an inline flex container (containers can sit next to each other) |
| justify-content: |
justify-content |
Positions flex items from left to right; main axis |
| justify-content: flex-start |
flex-start |
Positioned in order, left to right, no extra space |
| justify-content: flex-end |
flex-end |
Positioned in order, pushed to far right, no extra space |
| justify-content: center |
center |
Positioned in order, aligned center, no extra space |
| justify-content: space-around |
space-around |
Equal space before and after each item, making double space between |
| justify-content: space-between |
space-between |
Equal space between each element, but none at start or end (excepting margins, etc.) |
| align-items: |
align-items |
Positions flex items vertically; cross axis |
| align-items: flex-start; |
flex-start |
Positions all elements at the top of the parent container |
| align-items: flex-end; |
flex-end |
Positions all elements at the bottom of the parent container |
| align-items: center; |
center |
Centers all elements vertically |
| align-items: baseline; |
baseline |
The bottom of the content of all elements will be aligned with each other |
| align-items: stretch; |
stretch |
Elements will stretch from top to bottom of the container (unless a height is specified) |
| flex-grow: |
flex-grow |
Specifies which items grow to fill the container and at what proportions; default value = 0
(2 takes twice as much space as 1; elements will not grow past the max-width, if set); main axis |
| flex-shrink: |
flex-shrink |
Specifies which elements shrink and in what proportions (default value = 1)
min- and max-width take precedent; margins unaffected, same as flex-grow; main axis
|
| flex-basis: |
flex-basis |
Lets you specify the width of a flex item before it grows or shrinks |
| flex: |
flex (property, not value) |
Shorthand for declaring flex-grow, flex-shrink, and flex-basis (in that order) in one line
Note: You can drop flex-basis or flex-shrink, but you can't set flex-shrink and flex-basis using 2 values
|
| flex-wrap: |
flex-wrap |
Moves flex items to the next line; main axis |
| flex-wrap: wrap; |
wrap |
Flex items that don't fit on a row move down to the next line |
| flex-wrap: wrap-reverse; |
wrap-reverse |
Same as wrap but the order of rows is reversed |
| flex-wrap: nowrap; |
nowrap |
Prevents items from wrapping; default value. Only necessary to override a wrap value in a different CSS rule |
| align-content: |
align-content |
Aligns multiple rows of content in a flex container from top to bottom.
Uses same values as align-items; cross axis |
| flex-direction: |
flex-direction |
Used to switch the main and cross axes |
| flex-direction: row; |
row |
Positions flex items from left to right, start from the default top left corner |
| flex-direction: row-reverse; |
Positions flex items right to left starting from the top right corner |
|
| flex-direction: column; |
column |
Positions flex items from top to bottom of the container starting from the top left corner |
| flex-direction: column-reverse; |
column-reverse |
Positions flex items from bottom to top of the container starting from the bottom left corner |
| flex-flow: |
flex-flow |
Shorthand used to declare flex-direction and flex-wrap properties in one line (in that order) |