flex - the simple guide

just a brief intro of CSS3 flex. no deep shit ;)

credits to A Complete Guide to Flexbox
also git - the simple guide
by gaoryrt
please report issues on github

☟

.container

every flex based on {display: flex}
set these attributes in flexd container
instead of flexd items

flex-direction: row | row-re | column | column-re
flex-wrap: nowrap | wrap | wrap-reverse
<flex-flow>: <flex-direction> || <flex-wrap>

<justify-content>

alignment along the container
this WON'T make items diaplay horizontally
<justify-content>: flex-start | flex-end | center | space-between | space-around

<align-items>

flex items laying on the line
<align-items>: flex-start | flex-end | center | stretch | baseline

.item

set these attributes in flexd items
instead of flexd container

order: /integer/
flex-grow: /number/
flex-shrink: /number/
flex-basis: /length/ || auto
flex: none | [ <flex-grow><flex-shrink> || <flex-basis> ]

<align-self>