The Flexbox Sandbox

flex-direction:

the direction of the main axis

flex-wrap:

whether or not children will wrap within their container

justify-content:

positioning of elements along the main axis

align-items:

positions elements on the cross axis

align-content:

aligns flex lines when content wraps


Child:

choose a child to edit it's flex properties

order:

change the order in which a child appears

flex-grow:

rate a child grows when there is extra space

flex-shrink:

rate a child shrinks when there is not enough space for it

flex-basis:

width of selected child

align-self:

align-items for a specific child

1
2
3
4
5
About Flexbox