27/04/2025
Hi Guy's
Common Flex Container and Items Properties
1. display:
flex: Creates a block-level flex container.
inline-flex: Creates an inline-level flex container.
2. flex-direction: Defines the direction of the main axis.
row (default): Items are placed left-to-right.
row-reverse: Items are placed right-to-left.
column: Items are placed top-to-bottom.
column-reverse: Items are placed bottom-to-top.
3. justify-content: Aligns items along the main axis.
flex-start (default): Items start at the beginning.
flex-end: Items align at the end.
center: Items are centered.
space-between: Equal space between items.
space-around: Equal space around items.
space-evenly: Equal space between and around items.
4. align-items: Aligns items along the cross axis.
stretch (default): Items stretch to fill the container.
flex-start: Items align at the start.
flex-end: Items align at the end.
center: Items align in the center.
baseline: Items align at their baselines.
5. align-content: Aligns rows when there is extra space in the cross axis.
Works only with multiple rows (flex-wrap).
Values: stretch, flex-start, flex-end, center, space-between, space-around, etc.
6. flex-wrap: Controls whether items wrap onto multiple lines.
nowrap (default): No wrapping.
wrap: Items wrap to the next line.
wrap-reverse: Items wrap to the next line in reverse.
Flex Item Properties
1. flex: Shorthand for flex-grow, flex-shrink, and flex-basis.
Example: flex: 1 0 auto.
2. flex-grow: Controls how much a flex item grows relative to others.
Default: 0 (doesn't grow).
3. flex-shrink: Controls how much a flex item shrinks relative to others.
Default: 1 (shrinks as needed).
4. flex-basis: Sets the initial size of a flex item.
Default: auto.
5. align-self: Overrides align-items for a specific item.
Values: auto, flex-start, flex-end, center, baseline, stretch.
