Hello Fellow Codenewbies 👋
By default, flex stretches the height of items based on the highest item.
However, you can control the vertical position (cross axis) of items using align-items.
Controlling the vertical position of flex items
The align-items property works best on elements with background colors, shadows, or borders to visualize the effect.
The values of align-items
Flex-start
It aligns the items on the top (start) of the flex container, and the height of each item is maintained as it is. This value is the most frequently used for controlling vertical positioning.
Center
It aligns the items vertically on the center of the flex container.
Flex-end
It aligns the items on the bottom (end) of the flex container.
Stretch
This serves as the default align-items value. It stretches the height of the items based on the highest item. Use this to reset previously applied values.
Baseline
It aligns the items based on the first line of texts to be in line with each other. This rarely-used value only shows effects with text-containing elements.
Conclusion
align-itemsmanages cross-axis positioning (vertical) within flex containers- Essential values to understand:
- flex-start
- center
- flex-end
- stretch (default)
- baseline