Flexbox
Flex containers and items: direction, wrapping, growth, alignment and gap.
1 min readv1
A flex row#
HTML
A
B grows (flg=1)
C
<div nib="d=flex; ali=center; jsc=space-between; g=12px; w=320px; p=12px; bdrd=10px; bgc=#f1f5f9; dark:bgc=#1e293b">
<span nib="p=6px 10px; bgc=#4F52D9; cl=#fff; bdrd=6px">A</span>
<span nib="flg=1; p=6px 10px; bgc=#A8ABF4; cl=#1e1b4b; bdrd=6px">B grows (flg=1)</span>
<span nib="p=6px 10px; bgc=#4F52D9; cl=#fff; bdrd=6px">C</span>
</div>Alignment cheatsheet#
Goal | Rules |
|---|---|
vertically centre a row |
|
push the last item right |
|
space items evenly |
|
a column of equal gaps |
|
wrap onto new lines |
|
stop an item shrinking |
|
let a text child truncate |
|
Wrapping tags#
HTML
react
vue
svelte
angular
solid
<div nib="d=flex; flxw=wrap; g=6px; w=260px">
<span nib="p=3px 10px; bdrd=999px; bgc=#E3E4FD; cl=#2E30A0; fts=12px">react</span>
<span nib="p=3px 10px; bdrd=999px; bgc=#E3E4FD; cl=#2E30A0; fts=12px">vue</span>
<span nib="p=3px 10px; bdrd=999px; bgc=#E3E4FD; cl=#2E30A0; fts=12px">svelte</span>
<span nib="p=3px 10px; bdrd=999px; bgc=#E3E4FD; cl=#2E30A0; fts=12px">angular</span>
<span nib="p=3px 10px; bdrd=999px; bgc=#E3E4FD; cl=#2E30A0; fts=12px">solid</span>
</div>All flexbox shorthands#
Shorthand | CSS property |
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|