Understanding the Flex Container
When you set display: flex on an element, it becomes a flex container and its direct children become flex items. The container controls the main axis (determined by flex-direction) and the cross axis (perpendicular to the main axis). All spacing and alignment properties operate along these two axes.
Main Axis Alignment with justify-content
justify-content distributes items along the main axis. flex-start packs items at the start; flex-end at the end; center groups them in the middle. space-between puts equal space between items; space-around adds equal space around each item; space-evenly distributes identical gaps between and around items.
Cross Axis Alignment with align-items
align-items positions items along the cross axis. stretch fills the full cross dimension; flex-start aligns to the start edge; flex-end to the end edge; center places items in the middle; baseline aligns items by their text baselines, which is useful when items have different font sizes.
Flex Item Sizing: grow, shrink, basis
flex-grow controls how items expand to fill extra space. flex-shrink controls how items contract when space is scarce. flex-basis sets the initial size before growing or shrinking. The shorthand flex: 1 1 0 means grow equally, shrink equally, starting from zero width.
