I started over the Frontend Career Path Module 2 with new content to repeat some basics. Today I have learned abit about Flexbox:
- Justify-content: defines how the browser distributes space between and around content items along the horisontal line (main-axis.)
- Align-items: Controls the alignment of items on the vertical line (cross-axis)
- Flex-direction: Is by default row wich means items stack alongside of each other and sets how flex items are placed in the flex container defining the main axis and the direction.
This picture illustrates default row
If you set flex-direction to column items will stack on top of each other and the main axis and cross axis switch position.
The illustrations I have borrowed from Scrimba's tutorial in the Web dev basics Module.