File size: 881 Bytes
4a3f117
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
CSS Flexbox (Flexible Box Layout) is a layout model for arranging items in a container.
Activated by setting display: flex on a container element.

Container properties:
- flex-direction: row (default, horizontal) or column (vertical).
- justify-content: aligns items on main axis. Values: flex-start, flex-end, center, space-between, space-around.
- align-items: aligns items on cross axis. Values: stretch (default), flex-start, flex-end, center.
- flex-wrap: nowrap (default) or wrap to allow items to move to next line.
- gap: space between flex items.

Item properties:
- flex-grow: how much item grows relative to siblings. 0 means no grow.
- flex-shrink: how much item shrinks when space is limited.
- flex-basis: initial size of item before flex calculations.
- align-self: overrides align-items for a single item.

Shorthand: flex: grow shrink basis (e.g., flex: 1 1 auto)