彈性盒子布局方式：
.box
@設為flex布局後，子元素的float、clear和vertical-align屬性將失效
@採用 flex 布局的元素，稱為 flex 容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為 flex 專案（flex item），簡稱"專案"。
@容器預設存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。
專案預設沿主軸排列。單個專案佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size。
/容器屬性設定/
1.flex-direction屬性
決定主軸的方向（即專案的排列方向）
//水平方向
row(預設值） 主軸方向為水平方向，起點在左端
row-reverse 主軸方向為水平方向，起點在右端
//垂直方向
column 主軸方向為垂直方向，起點在上沿
column-reverse 主軸方向為垂直方向，起點在下沿
2.flex-wrap屬性
預設情況下，專案都排在一條線（又稱「軸線」）上。
flex-wrap屬性定義了，如果一條軸線排不下，如何換行
nowrap(預設) 不換行
wrap 換行，第一行在上方
wrap-reverse 換行，第一行在下方
3.flex-flo屬性：
是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap
4.justify-content屬性
justify-content屬性定義了專案在主軸上的對其方式
flex-start(預設值） 左對齊
flex-end 右對齊
center 居中
space-between 兩端對齊，專案之間的間隔都相等
space-around 每個專案兩側的間隔相等，所以，專案之間的間隔比專案與邊框的間隔大一倍
5.align-items屬性
定義專案在交叉軸上如何對其
flex-start 交叉軸的起點對齊
flex-end 交叉軸的終點對齊
center 交叉軸的中點對齊
baseline 專案的第一行文字的基線對齊
stretch(預設值) 如果專案未設定高或設為auto，將佔滿整個容器的高度
6.align-content屬性
定義了多根軸線的對齊方式，如果專案只有一根軸線，該屬性不起作用
flex-start 與交叉軸的起點對齊
flex-end 與交叉軸的終點對齊
center 與交叉軸的中點對齊
space-between 與交叉軸兩端對齊，軸線之間的間隔平均分布
space-around 每根軸線兩側的間隔都相等，所以軸線之間的間隔比軸線與邊框的間隔大一倍
stretch(預設值) 軸線佔滿整個交叉軸
/專案屬性/
order:定義專案排列的順序。數值越小，排列越靠前，預設為0
flex-grow:定義專案的放大比例，預設為0，如果存在空白部分，也不會放大
flex-shrink:定義了專案的縮小比例，預設為1，如果空間不足，該專案將縮小
flex-basis:定義了在分配多餘空間之前，專案佔據的主軸空間(main size)。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案本來的大小
flex:是flex-grow,flex-shrink和flex-basis的簡寫，預設值為0 1 auto，後兩個屬性可選
align-self:允許單個的專案有與其他專案不一樣的對齊方式，可覆蓋align-item屬性。預設為auto，表示繼承父元素的align-item屬性,如果沒有父元素，則等同於stretch
flex布局 彈性盒子
1.display flex inline flex 子元素的float clear和vertical align屬性將失效。flex direction 主軸的方向即專案排列方向 預設row flex wrap 軸線排不下，如何換行 flex flow 預設值為row nowrap justify...
flex彈性盒子,,彈性盒子布局
flex 彈性 布局 2009年w3c推出flex布局.可以簡便,完整,響應式的實現各種網頁布局 ie10 以往的網頁布局 layout 方式 基於盒模型,依賴display屬性 margin屬性 position屬性 float屬性特殊布局比較麻煩 比如元素的垂直居中 一.flex是什麼?flex...
Flex布局（CSS彈性盒子）
css3彈性盒子 flexible box或flexbox 是一種用於在頁面上布置元素的布局模式，使得當頁面布局必須適應不同的螢幕尺寸和不同的顯示裝置時，元素可 地執行。對於許多應用程式，彈性盒子模型提供了對塊模型的改進，因為它不使用浮動，flex容器的邊緣也不會與其內容的邊緣摺疊。摘自mdn 使用...