display:inline-flex
前置布局 : 容器為DIV的背景顏色為灰色 沒有設置寬高 子項為DIV有固定寬高
flex-inline.png
display:inline-flex; 就是容器為flex布局但是具有內(nèi)聯(lián)塊元素的特點 不會占據(jù)一行 內(nèi)容由子元素撐開 并且子元素會并排排列
display:flex
flex.png
display:flex; 就是容器為flex布局并且由塊級元素特點并且子元素會并排排列
flex-direction 屬性決定主軸的排列方向 有四個屬性 row | row-revercs | column | column-reverse
flex-direction:row（默認值）
row.png
沿著主軸的正方向排列
flex-direction:row-reverse
row-reverse.png
沿著主軸的反方向排列
flex-direction:column
column.png
沿著交叉軸的正方向排列
flex-direction:column-reverse
column-reverse.png
沿著交叉軸的反方向排列
flex-wrap: nowrap; 默認情況下黔牵，子項都排在一條軸線上 flex-wrap屬性定義励两，如果一條軸線排不下要則么換行 三個常用值: nowrap | wrap | wrap-reverse
nowrap 默認不換行
nowrap.png
這里每個圖片的寬度已經(jīng)超過父容器 但并沒有換行 而是將子元素的寬度減小
flex-wrap:wrap(換行 第一行在上方)
wrap.png
flex-wrap:wrap-reverse(換行 但第一行在最后)
wrap-reverse.png
flex-flow:row nowrap;
flex-flow 是flex-direction 和 flex-wrap 屬性的簡寫形式 默認值為 row 和 nowrap
justify-content屬性定義了整體子項在主軸上的對齊方式
前置樣式 給子項都設置了margin-left 和margin-right 都為20px亡蓉；
justify-content:flex-start;(整體左對齊)
flex-start.png
默認是整體左對齊
justify-content:flex-end;(整體右對齊)
flex-end.png
這是整體右對齊
justify-content:center;(整體中心對齊)
center.png
justify-content:space-between;兩端的間隔都一樣续挟，項目之間的間隔都相等)
space-between.png
justify-content:space-around;(每個子項兩側(cè)的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍蔓同。)
space-around.png
align-items屬性定義了整體子項在交叉軸上如何對齊flex-start | flex-end | center | baseline | stretch
前置樣式 這里用將 24元素的高變大 利于觀察交叉軸
align-items:flex-start;（整體子項以交叉軸的起點對齊）
flex-start.png
align-items:flex-end;（整體子項交叉軸的終點對齊）
flex-end.png
align-items:center;（整體子項交叉軸的中點對齊）
center.png
align-items:baseline(以子項中的第一行文字的基線對齊)
baseline.png
align-items:stretch (若子項沒有設置高度或者為auto 將占滿容器的高度)
這里沒有給子項設置高度 占滿容器的高度
stretch.png
