Main axis properties
Flex elements are arranged along the main axis. Whether an element is inline or block, it doesn't matter.
Flex-direction
The direction of the main axis is detemined by the flex-direction property.
flex-direction: row /* by default */
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
Justify-content
The aligment of the main axis is determined by justify-content property.
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
Cross axis properties
In addition to the main axis, a cross axis also exists. It is perpendicular to the main axis, and the direction of the cross axis cannot be changed.
Align-items
To align items along the cross axis you need to use align-items property.
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline;
align-items: stretch;
Align-content
To distribute elements along the cross axis by the different modes you need to use thealign-content property.
align-content: start;
align-content: end;
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: space-evenly;
Align-self
The align-self acts pretty similar as align-content but can be applied to a single flex element.
Wrapping
If you add many flex elements to the root container, they will shrink to their maximum possible size. However, if you keep adding more, they will overflow the container, but will remain on one line.
Flex wrap
To move overflow elemnts to the new line is used flex-wrap property.
flex-wrap: nowrap; /* by default */
flex-wrap: wrap;
flex-wrap: wrap-reverse;
Flex-flow
flex-flow is a compact version of setting direction and wrapping proprties.
.container {
display: flex;
flex-flow: row wrap;
}
Ordering
We can change the order of any flex elements by using the order property. By default, all elements have this property equal to 0.
Grow, Shrink and Basis
Flex-basis
The flex-basis property sets a base size along the main axis. If flex-basis is not specified, the size will be taken from the height and width of the content. Has the same dimensions as width and height.
Flex-grow
The base size can be changed if the free space in the container allows that. The element size can be increased by the greed factor flex-grow.
Flex-shrink
If the sum of flex items is greater than the available space in the container, they will be shrunk according to the flex-shrink factor.
Flex-flow
For short notations grow shrink and basis I use numbers and words.
.block_element {
flex: initial; /* 0 1 auto - by default */
flex: auto; /* 1 1 auto */
flex: none; /* 0 0 auto */
flex: 2; /* number -> flex-grow -> 2 1 auto */
flex: 50%; /* unit of length measurement -> flex-basis = 50% -> 0 1 50% */
flex: 2 50%; /* flex-grow и flex-basis -> 2 1 50% */
}