參考資料：《Flex 布局教程：語法篇》
設(shè)置為Flex布局后（display: flex;）伴澄，子元素的float碰缔、clear和vertical-align屬性將失效账劲。
Flex容器：采用Flex布局的元素；
Flex項目：Flex容器的所有子元素金抡；
Flex容器的6個屬性
- flex-direction（項目的排列方向瀑焦，
flex-direction: row | row-reverse | column | column-reverse;）- flex-wrap（項目是否換行，
flex-wrap: nowrap | wrap | wrap-reverse;）- flex-flow（flex-direction和flex-wrap的簡寫梗肝，
flex-flow: <flex-direction> <flex-wrap>;）- justify-content（項目在主軸上的對齊方式榛瓮，
justify-content: flex-start | flex-end | center | space-between | space-around;）- align-items（項目在交叉軸上的對齊方式，
align-items: flex-start | flex-end | center | baseline | stretch;）- align-content（多根軸線的對齊方式巫击，只有一根軸線禀晓，該屬性不起作用，
align-content: flex-start | flex-end | center | space-between | space-around | stretch;）
注：align-content中提刀的多根軸線坝锰，即flex-wrap: wrap | wrap-reverse且項目的排布不止一行粹懒，如align-content示例。
Flex項目的6個屬性
- order（項目的排序順序顷级，值越小越靠前凫乖，默認0，
order: <integer>;）- flex-grow（項目的放大比例，默認0帽芽，即如果存在剩余空間也不放大删掀，
flex-grow: <number>;）- flex-shrink（項目的縮小比例，默認1嚣镜，即如果空間不足則縮小爬迟，負值無效，
flex-shrink: <number>;）- flex-basis（在分配多余空間之前菊匿，項目占據(jù)的主軸空間付呕，默認auto，
flex-basis: <length> | auto;）- flex（flex-grow跌捆、flex-shrink和flex-basis的簡寫徽职，
auto（1 1 auto）和none（0 0 auto）兩個快捷值）- align-self（允許單個項目有與其他項目不一樣的對齊方式，默認auto佩厚，繼承父元素的align-items屬性姆钉，
align-self: auto | flex-start | flex-end | center | baseline | stretch;）
可以通過Flex布局示例更清晰的了解Flex布局。
