Justify-Content and Align-Items
Distribute items along the main axis and cross axis using justify-content and align-items.
Two Key Alignment Properties
The two most used flex alignment properties are:
justify-content— aligns items along the main axisalign-items— aligns items along the cross axis
justify-content: flex-start
flex-start (default) packs items toward the start of the main axis. In row direction, items align to the left.
.nav {
display: flex;
justify-content: flex-start; /* default */
}All lessons in this course
- Display Flex and Flex Direction
- Justify-Content and Align-Items
- Flex Wrap and Align-Content
- Flex Grow Shrink and Basis