CSS Flex

 In CSS, Flexbox (Flexible Box Layout) is a one-dimensional layout model designed for arranging elements in rows or columns. It allows child elements (flex items) to "flex" their sizes—growing to fill unused space or shrinking to fit smaller containers—without the need for complex positioning or floats. 

The term "flex" is commonly used in two ways in CSS: 

1. The Property

Applying to a parent element (the flex container) automatically makes all its direct children flex items.

• Main Axis & Cross Axis: Items are laid out along a main axis (horizontal by default) and a perpendicular cross axis.
• Container Control: You can control the container using properties like (main-axis alignment) and (cross-axis alignment). 

2. The Shorthand Property

Used on individual flex items, the property is a shorthand for three sub-properties that determine how that specific item occupies space:

• : Defines how much an item should grow relative to its siblings if there is extra space.
• : Defines how much an item should shrink if the container is too small to fit everything.
• : Defines the initial size of the item before any growing or shrinking occurs. 

Common Shorthand Values:

• : Equivalent to . The item will grow and shrink to fill available space equally with other items marked .
• : Equivalent to . The item grows and shrinks based on its initial content size.
• : Equivalent to . The item becomes fully inflexible, neither growing nor shrinking. 

Key Benefits

• Responsiveness: Items adjust dynamically to different screen sizes and orientations.
• Alignment: Easily center content vertically and horizontally with a few lines of code.
• Order: You can change the visual order of items using the property without changing the underlying HTML.