| Display |
|---|
| flex |
| inline-flex |
| Direction |
|---|
| 'flex-direction' |
| 'flex-wrap' |
| 'flex-direction' | 'flex-wrap' |
|---|---|
| row | wrap |
| row-reverse | wrap-reverse |
| column | |
| column-reverse |
| Alignment |
|---|
| 'justify-content' |
| 'align-self' |
| 'align-items' |
| 'align-content' |
| 'justify-content' | 'align-self' | 'align-items' | 'align-content' |
|---|---|---|---|
| flex-start | flex-start | flex-start | flex-start |
| flex-end | flex-end | flex-end | flex-end |
| center | center | center | center |
| space-between | stretch | stretch | space-between |
| space-around | baseline | baseline | space-around |
| space-evenly | auto | stretch |
| Child properties |
|---|
| 'flex-grow' |
| 'flex-shrink' |
| 'flex-basis' |
| 'order' |
|
flex: /flex-grow/ /flex-shrink/ /flex-basis/ |
| Gaps |
|---|
| 'row-gap' |
| 'column-gap' |
|
gap: /row/ /column/ ~ /row & column/ |