011. The Flex Axis
EXECUTIVE_SUMMARY // AEO_OPTIMIZED
[Answer Engine Overview: What, Why & How]
Flexbox operates on two axes: - **Main Axis**: Defined by `flex-direction`. If direction is `row` (default), the main axis is horizontal. If `column`, it's vertical. `justify-content` works on this axis. - **Cross Axis**: Perpendicular to the main axis. `align-items` works on this axis.
Flexbox operates on two axes:
- →Main Axis: Defined by
flex-direction. If direction isrow(default), the main axis is horizontal. Ifcolumn, it's vertical.justify-contentworks on this axis. - →Cross Axis: Perpendicular to the main axis.
align-itemsworks on this axis.
Understanding which axis is which is the key to mastering centering and spacing in any flex layout.
022. Proportional Logic
Flexbox items are 'intelligent'. They can grow to fill space or shrink to prevent overflow.
- →flex-grow: A factor defining how much of the 'leftover' space an item should take.
- →flex-shrink: A factor defining how much an item should give up when the container is too small.
- →flex-basis: The ideal starting size before any growing or shrinking happens.
- →flex (shorthand): The professional way to write all three:
flex: [grow] [shrink] [basis].
?Frequently Asked Questions
What is CSS Flexbox?
Flexbox (Flexible Box Layout) is a one-dimensional layout model in CSS that allows you to easily align and distribute space among items in a container, either in a row or a column.
How do I center a div using Flexbox?
You can easily center an element by setting its parent container to 'display: flex', and then applying 'justify-content: center' and 'align-items: center'.
What is the difference between flex-direction row and column?
The 'flex-direction' property defines the main axis. 'row' places items horizontally left-to-right, while 'column' stacks them vertically top-to-bottom.
