CSS3 Flex布局（伸縮布局盒模型）
CSS3引入了一種新的布局模式——Flexbox布局，即伸縮布局盒（Flexible Box）模型，此布局對于設(shè)計比較復(fù)雜的頁面非常有用，特別是“垂直居中”布局，非常容易實現(xiàn)。
一、Flex布局是什么？
Flex是Flexible Box的縮寫，意為”彈性布局”，用來為盒狀模型提供最大的靈活性。
任何一個容器都可以指定為Flex布局。
三、容器的屬性
以下6個屬性設(shè)置在容器上。
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
CSS3 彈性盒子內(nèi)容
彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。
彈性容器通過設(shè)置 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器。
彈性容器內(nèi)包含了一個或多個彈性子元素。
注意：?彈性容器外及彈性子元素內(nèi)是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內(nèi)布局。
彈性子元素通常在彈性盒子內(nèi)一行顯示。默認(rèn)情況每個容器只有一行。
以下元素展示了彈性子元素在一行內(nèi)顯示，從左到右:
flex-direction
flex-direction?屬性指定了彈性子元素在父容器中的位置。
語法
flex-direction: row | row-reverse | column | column-reverse
flex-direction的值有:
row：橫向從左到右排列（左對齊），默認(rèn)的排列方式。
row-reverse：反轉(zhuǎn)橫向排列（右對齊，從后往前排，最后一項排在最前面。
column：縱向排列。
column-reverse：反轉(zhuǎn)縱向排列，從后往前排，最后一項排在最上面。
justify-content 屬性
內(nèi)容對齊（justify-content）屬性應(yīng)用在彈性容器上，把彈性項沿著彈性容器的主軸線（main axis）對齊。
justify-content 語法如下：
justify-content: flex-start | flex-end | center | space-between | space-around
align-items 屬性
align-items?設(shè)置或檢索彈性盒子元素在側(cè)軸（縱軸）方向上的對齊方式。
語法
align-items: flex-start | flex-end | center | baseline | stretch
flex-wrap 屬性
flex-wrap?屬性用于指定彈性盒子的子元素?fù)Q行方式。
語法
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
各個值解析:
nowrap?- 默認(rèn)， 彈性容器為單行。該情況下彈性子項可能會溢出容器。
wrap?- 彈性容器為多行。該情況下彈性子項溢出的部分會被放置到新行，子項內(nèi)部會發(fā)生斷行
wrap-reverse?-反轉(zhuǎn) wrap 排列。
align-content 屬性
align-content?屬性用于修改?flex-wrap?屬性的行為。類似于?align-items, 但它不是設(shè)置彈性子元素的對齊，而是設(shè)置各個行的對齊。
語法
align-content: flex-start | flex-end | center | space-between | space-around | stretch
