Align Items and Align Self
CSS Property | Description |
---|---|
align-items |
Aligns flex items along the cross-axis of the flex container. Options include flex-start , flex-end , center , stretch , and baseline . |
align-self |
Overrides the default alignment for a specific flex item within the container. Options match align-items values: flex-start , flex-end , center , stretch , and baseline . |
Explain the concept of the CSS Flexbox
The CSS Flexbox (Flexible Box) model is a layout mechanism that provides a straightforward and efficient way to design complex, responsive, and dynamic web layouts. Introduced to address challenges posed by traditional layout models, Flexbox simplifies the alignment and distribution of space among items within a container, regardless of their size or order.
Table of Content
- Container and Items
- Flex Direction
- Justify Content
- Align Items and Align Self
- Flex Wrap
- Flex Grow, Shrink, and Basis