One-dimensional layout with Flexbox
| Command | Description |
|---|---|
display: flex | Enable flexbox |
flex-direction: row | column | Main axis direction |
flex-wrap: wrap | nowrap | Allow wrapping |
justify-content | Align items on main axis |
align-items | Align items on cross axis |
align-content | Align wrapped lines |
gap: 10px | Space between items |
| Command | Description |
|---|---|
flex-start | Pack at start (default) |
flex-end | Pack at end |
center | Center items |
space-between | Even space, no edges |
space-around | Even space, half edges |
space-evenly | Truly even space |
| Command | Description |
|---|---|
stretch | Fill container (default) |
flex-start | Align at start |
flex-end | Align at end |
center | Center on cross axis |
baseline | Align text baselines |
| Command | Description |
|---|---|
flex-grow: 1 | Grow factor |
flex-shrink: 0 | Shrink factor (0 = don't shrink) |
flex-basis: 200px | Initial size |
flex: 1 | Shorthand (grow shrink basis) |
align-self: center | Override align-items for one item |
order: -1 | Change visual order |