Flex Container and Main Axis
Flexbox is a one-dimensional layout system. A flex container distributes its direct children along a main axis and cross axis.
display: flex creates the flex formatting context. flex-direction determines the main axis, while justify-content primarily operates along the main axis and align-items operates along the cross axis.
Flex Main and Cross Axes
Basic Flex Layout
.toolbar {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 1rem;
}💡 The toolbar distributes its children horizontally and centers them vertically.
Key Takeaways
- Flexbox is primarily one-dimensional.
- The main axis depends on
flex-direction.
Knowledge Check
With `flex-direction: row`, which direction is the main axis?