Show Menu

css flex Cheat Sheet (DRAFT) by

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 automa­tic­ally.
flex-d­ire­ction: row | row-re­verse | column | column­-re­verse
flex-wrap: nowrap | wrap | wrap-r­everse
single lines or multiple lines
flex-flow: <fl­ex-­dir­ect­ion> <fl­ex-­wra­p>
justif­y-c­ontent: flex-start | flex-end | center | space-­between | space-­around
align-­items: stretch | flex-start | flex-end | center | baseline
align-­con­tent: stretch | flex-start | flex-end | center | space-­between | space-­around

flex item properties

order: <in­teg­er>
flex-grow: <nu­mbe­r>
force to fill container; 0 means remaining original size
flex-s­hrink: <nu­mbe­r>
flex-b­asis: auto | <wi­dth>
initial main size (width or height) of the flex item
flex: <fl­ex-­gro­w> <fl­ex-­shr­ink> <fl­ex-­bas­is>
align-­self: auto | flex-start | flex-end | center | baseline | stretch