Q9: How do Flexbox axes operate and what are primary flex container properties?
Flexbox manages 1-dimensional layouts along two axes: Main Axis (defined by flex-direction: row or column) and Cross Axis (perpendicular to main axis). Container rules include display: flex, flex-direction, and flex-wrap.
Flexbox Main Axis vs Cross Axis Configuration
Flex Container Setup
.flex-parent {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}💡 Establishes a horizontal main axis with multi-line item wrapping enabled.
Key Takeaways
flex-directiondictates whether main axis runs horizontally or vertically.flex-wrap: wrapallows flex items to flow onto additional lines.
Knowledge Check
If flex-direction is set to column, which orientation does the Cross Axis adopt?