首先：任何容器都能使用flex布局（webkit核心需要新增字首）
.box使用flex後子元素的float,clear,vertical-algin屬性都會失效;
flex容器介紹：
flex容器屬性：
1.flex-direction:row|row-reverse|column|column-reverse 布局的方向
1.row表示從左到右（預設）
2.row-reverse表示從右到左
3.column表示從上到下
4.column-reverse表示從下到上
2.flex-wrap: nowrap | wrap | wrap-reverse 內容超出容器時的操作
1.nowrap（預設）：不換行
2.wrap：換行，第一行在上方
3.wrap-reverse：換行，第一行在下方。
3.flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap
4.justify-content: flex-start | flex-end | center | space-between | space-around; （水平軸方向對齊方式）
！justify-content屬性定義了專案在主軸上(橫軸)的對齊方式。(與flex-direction不同,這個是定義位置)
1.flex-start:主軸的開始（左）
2.flex-end:主軸的j結束(右)
3.center：橫軸中心
4.space-between：兩端對齊，專案之間的間隔都相等（！可用於多列布局）
5.space-around: 每個專案兩側的間隔相等
5.align-items: flex-start | flex-end | center | baseline | stretch; （垂直軸方向對齊方式）
1.flex-start：交叉軸的起點對齊。
2.flex-end：交叉軸的終點對齊。
3.center：交叉軸的中點對齊。
4.baseline: 專案的第一行文字的基線對齊。
5.stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。
1.flex-grow：0或者非0；當空間有剩餘時是否伸展佔據全部空間；
2.align-self屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch
總結 Flex布局
網頁布局 layout 是 css 的乙個重點應用。布局的傳統解決方案，基於 盒狀模型 依賴 display 屬性 position 屬性 float 屬性。它對於那些特殊布局非常不方便，比如，垂直居中 就不容易實現。任何乙個容器都可以指定為 flex 布局。行內元素也可以使用 flex 布局。bo...
flex 布局總結
flex 容器的屬性 flex direction 主軸方向 justify content 主軸上 item 的對齊方式 align items 交叉軸上 item 的對齊方式 align content 多根軸上的對齊方式，若只有一根軸，該屬性則不起作用 flex wrap 如何換行item 屬...
flex布局總結
以下6屬性設定在容器上 1.flex direction 決定主軸方向 2.flex warp 決定一排放不下，如何換行 3.flex flaw 1和2兩屬性的合併寫法 4.justify content 定義專案在主軸上的對齊方式 5.align items 定義專案在交叉軸的對齊方式 6.ali...