flex是Flexible Box的縮寫，意思為“彈性佈局”，在使用過程中簡單、易用、代碼較少，在製作網頁的時候經常使用這種方法來進行佈局。
在使用的過程中任何一個容器都可以指定為Flex佈局.{display:flex},行內元素也可以使用Flex佈局.box{display:inline-flex;}。當我們將容器設置為Flex佈局以後，容器當中的子元素的float、clear等屬性會失效。採用Flex佈局的元素，稱為Flex容器，他的所有子元素自動成為容器成員，稱為Flex項目。
容器可以有如下幾個屬性：justify-content、align-content、align-items flex-direction、flex-wrap、flex-flow。
flex-direction屬性決定主軸的的方向，即容器中項目排列的方向，一般默認的方向是橫排列。flex-direction有四個值，分別為row：主軸水平方向，起點在左端，row-reverse：起點在右端，column：主軸為垂直方向，起點在上沿，column-reverse：起點在下沿。
flex-wrap屬性，項目的默認值（nowrap）都在一條線上，wrap換行，第一行在上方，wrap-reverse換行，第一行在下方。
flex-flow是屬性flex-direction屬性和flex-wrap的簡寫。默認值（row nowrap）為橫向排列不換行。.box{flex-flow:flex-direction flex-wrap}。
.box{justify-content:flex-start|flex-end|center|space-between|sp-ace-around},這幾個值的意思分別為左對齊，右對齊，居中，兩端對齊，兩端對齊但是項目邊上的元素和容器之間有空隙。他的默認值為左對齊。
align-items屬性有五個值，flex-start：交叉軸的起點對齊，flex-end：終點對齊，center：中點對齊，baseline：項目的第一行文字基線對齊，stretch：當項目未設置高度的時候，佔滿這個容器的高度。
align-content屬性定義了多根軸線的對齊方式。當項目只有一根軸線的時候，該屬性是不起作用的。flex-start：交叉軸的起點對齊，flex-end：終點對齊，center：中點對齊，space-between：與交叉軸的兩端對齊，軸線之間的間隔平均分佈，space-around：每根軸線兩側的間隔都相等，因此，軸線之間的間隔比軸線與邊框的間隔大一倍，strentch：軸線佔滿整個交叉軸。
總結：上面講了flex佈局容器的屬性，屬性不是很多，但是在我們佈局的時候使用這些屬性可以很大的減少我們的代碼量。下一篇我們會講一下項目的屬性，下篇見。
閱讀更多 恩思傳媒 的文章
