Flex Items Alignment with align-items: stretch
When a flex container has align-items: stretch, all flex items are stretched to fill the container along the cross axis by default. This makes items expand to match the height (for row direction) or width (for column direction) of the container, unless a fixed size or min/max constraints are applied.
Default behavior: Flex items stretch to fill the container along the cross axis.
Overridden by fixed sizes: If a flex item has a specific
height(row) orwidth(column), the fixed size takes precedence over stretching.Respecting min/max:
min-height,max-height,min-width, andmax-widthlimit the stretching of flex items.Works for all items unless
align-selfis used on individual items to override the container'salign-items.
In this example, Item 1 and Item 3 stretch to fill the 200px container height, while Item 2 maintains its fixed height of 100px.