flex是flexible box的縮寫，意為」彈性布局」，用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為flex布局。
flex布局使得乙個框體內部的排版更為便捷，比如柵格排版，自適應分配長寬，垂直居中等，原來可能需要很多樣式配合來完成。
flex布局主要由兩層結構實現，外層container和內層item，當然內層item也可以是更內層的container。
任何乙個容器都可以指定為flex布局。
.box複製**.box複製**.box複製**採用flex布局的元素，稱為flex容器（flex container），簡稱」容器」。它的所有子元素自動成為容器成員，稱為flex專案（flex item），簡稱」專案」。
容器預設存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。
專案預設沿主軸排列。單個專案佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size。
"container">
"item1">1
"item2">2
"item3">3
複製**
以下6個屬性設定在容器上。
3.1flex-direction
主軸的方向
// row 自左向右
// row-reverse 自右向左
// column 自上而下
// column-reverse 自下向上
flex-direction: row(default) | row-reverse | column | column-reverse;複製**
3.2flex-wrap
控制專案的換行規則，因為預設不換號，當專案的寬度之和大於容器的寬度時，會根據專案的一些屬性決定實際寬度分配
// nowrap 不換行
// wrap 換行，新行在下方
// wrap-reverse 換行，新行在上方
flex-wrap: nowrap(default) | wrap | wrap-reverse;複製**
3.3flex-flow
是flex-direction和flex-wrap的縮寫
// 預設 flex-flow: row nowrap
flex-flow:
|| ;複製**
3.4justify-content
主軸上的對齊方式
justify-content: flex-start(default) | flex-end | center | space-between | space-around;複製**3.5align-items
交叉軸上的對齊方式
// flex-start 交叉軸的起點對齊
// flex-end 交叉軸的終點對齊
// center 交叉軸的中點對齊
// baseline 專案的第一行文字的基線對齊
// stretch 如果專案未設定高度或設為auto，將佔滿整個容器的高度
align-items: flex-start | flex-end | center | baseline | stretch(default);複製**
3.6align-content
定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。
// flex-start 與交叉軸的起點對齊
// flex-end 與交叉軸的終點對齊
// center 與交叉軸的中點對齊
// space-between 與交叉軸兩端對齊，軸線之間的間隔平均分布
// space-around 每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍
// stretch 軸線佔滿整個交叉軸
align-content: flex-start | flex-end | center | space-between | space-around | stretch(default);複製**
以下6個屬性設定在專案上。
order屬性定義專案的排列順序。數值越小，排列越靠前，預設為0。
.item 複製**flex-grow屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。
.item 複製**flex-shrink屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。
.item 複製**負值對該屬性無效。
flex-basis屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小。
.item 複製**flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。
.item 複製**建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。
align-self屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
.item 複製**總結：flex布局使得乙個框體內部的排版更為便捷，減少了更多樣式的設定。
總結 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...