參考資料：《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（項目的排序順序，值越小越靠前，默認(rèn)0，
order: <integer>;）- flex-grow（項目的放大比例，默認(rèn)0，即如果存在剩余空間也不放大，
flex-grow: <number>;）- flex-shrink（項目的縮小比例，默認(rèn)1，即如果空間不足則縮小，負值無效，
flex-shrink: <number>;）- flex-basis（在分配多余空間之前，項目占據(jù)的主軸空間，默認(rèn)auto，
flex-basis: <length> | auto;）- flex（flex-grow、flex-shrink和flex-basis的簡寫，
auto（1 1 auto）和none（0 0 auto）兩個快捷值）- align-self（允許單個項目有與其他項目不一樣的對齊方式，默認(rèn)auto，繼承父元素的align-items屬性，
align-self: auto | flex-start | flex-end | center | baseline | stretch;）
可以通過Flex布局示例更清晰的了解Flex布局。
