This is a draft cheat sheet. It is a work in progress and is not finished yet.
container properties
display: flex | inline flex |
all immediate child will become flex items automatically. |
flex-direction: row | row-reverse | column | column-reverse |
flex-wrap: nowrap | wrap | wrap-reverse |
single lines or multiple lines |
flex-flow: <flex-direction> <flex-wrap> |
justify-content: flex-start | flex-end | center | space-between | space-around |
align-items: stretch | flex-start | flex-end | center | baseline |
align-content: stretch | flex-start | flex-end | center | space-between | space-around |
|
|
flex item properties
order: <integer> |
flex-grow: <number> |
force to fill container; 0 means remaining original size |
flex-shrink: <number> |
flex-basis: auto | <width> |
initial main size (width or height) of the flex item |
flex: <flex-grow> <flex-shrink> <flex-basis> |
align-self: auto | flex-start | flex-end | center | baseline | stretch |
|
