display: flex;
flex: 1 1 0;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
flex-direction: row; Play with direction to change the axe
row: lay out items from left to right
row-reverse: lay out items from right to left
column: lay out items from top to bottom
column-reverse: lay out items from bottom to top
justify-content:
flex-start: group items in the left (the start) of a container
flex-end: group items in the right of a container
center: group items in the center of a container
space-between: evenly distribute items in a container such that the first item aligns to the left and the final item aligns to the right
space-around: evenly distribute items in a container such that all items have equal space around them
align-items: stretch;
stretch items to fill the container
flex-start: align items across the top of the container
flex-end: align items across the bottom of the container
center: align items across the center of the container
baseline: align items across the baseline of the container
flex-wrap:
wrap:
order:
5: Represents the ordinal group the flex item has been assigned.
align-self:
auto: Computes to parent's align-items value or stretch if the element has no parent.
flex-start: The cross-start margin edge of the flex item is flushed with the cross-start edge of the line.
flex-end: The cross-end margin edge of the flex item is flushed with the cross-end edge of the line.
center: The flex item's margin box is centered within the line on the cross-axis. If the cross-size of the item is larger than the flex container, it will overflow equally in both directions.
baseline: All flex items are aligned such that their baselines align. The item with the largest distance between its cross-start margin edge and its baseline is flushed with the cross-start edge of the line.
stretch: Flex items are stretched such as the cross-size of the item's margin box is the same as the line while respecting width and height constraints.
flex-flow:
/* flex-flow: <'flex-direction'> */
flex-flow: row;
flex-flow: row-reverse;
flex-flow: column;
flex-flow: column-reverse;
/* flex-flow: <'flex-wrap'> */
flex-flow: nowrap;
flex-flow: wrap;
flex-flow: wrap-reverse;
/* flex-flow: <'flex-direction'> and <'flex-wrap'> */
flex-flow: row nowrap;
flex-flow: column wrap;
flex-flow: column-reverse wrap-reverse;
/* Global values */
flex-flow: inherit;
flex-flow: initial;
flex-flow: unset;