THE FLEXBOX ONE PAGE CHEAT SHEET
Parent (flex container)
align-content Algns lex contsine ines on the cross-axis when there i space remaining.
parent (
aUign-content: ERB flex-start | flecend | center | space-betveen | space-sround:
)
align-items Ailigns {lox toms on the cross ax.
parent {
aLign- stems
)
display Defines the flex container.
parent (
display: fee:
| Flex-start | Tlex-end | center | baseline:
flex-direction Specifies the direction ofthe flex tems.
parent (
flex-direction: BI rowreverse | column | column-reverse:
d
flex-wrap Specifies whether the flex items should wrap or not
parent (
flex-wap weap | wrap-reverse:
fiex-flow Sherthond propery for loxdrecton trap.
"Ren How: GEER excretion tx wrap:
Justify-content loys fox tonson the malts
PI cnn GREIERETEB: ee c0e 1 center | space-around | space-between:
Children (flex items)
align-self Overrides the align-items property so that a flex item can be aligned individually.
hile
align-sett: IMJ! lex-start | flex-end | center | stretch | baseline
flex-grow Species how mucha flex item will grow in elation tothe other items inside the seme flex container.
ome
fex-econ: ffi ;
)
flex-basis. Spoctios tho intial longth of o flex tom
“hile (
les-basss: MJ
)
flex. shorthand property fr flx.growy flax shrnk, floxbasi.
chile
tex | flex-grow, flex-shrink, flex-basis:
y
‘order Controls the order in which flex items are laid out in a flex container.
cnite
order! BJ s