The container in this style sheet was defined at the beginning. The “display: flex;” command enables the Flexbox. The elements are distributed from left to right, as we have not defined them differently. However, to modify the distribution, five different options can be set with the “justify-content” command:
- flex-start: left-justified
- flex-end: right-justified
- center: centred
- space-around: equally distributes the space surrounding the boxes
- space-between: equally distributes the space between the boxes
The remaining code is only cosmetic and has nothing to do with the actual Flexboxes.
With Flexbox, CSS originates from a horizontal alignment. It is also possible, however, to arrange the elements in a column. In addition, one can reverse the direction – from left to right or from bottom to top. For this purpose, one uses the “flex-direction” command:
- row: left to right
- row-reverse: right to left
- column: top-down
- column reverse: bottom-up
At the same time, the “justify-content: flex-end;” command does not mean the same thing as “flex-direction: row-reverse;”. Using the first variant, one places the last element to the right, while the second variant changes the order. The first element in the code would thus appear to the right.