Flex Grow, Shrink, and Basis
CSS Property | Description |
---|---|
flex-grow |
Defines the ability of a flex item to grow and fill the available space in the flex container. A higher value indicates a greater ability to grow. |
flex-shrink |
Determines the ability of a flex item to shrink if there’s not enough space in the flex container. A higher value indicates a greater ability to shrink. |
flex-basis |
Specifies the initial size of a flex item before any remaining space is distributed. It sets the starting size of the item in the main axis. |
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