flex佈局

　　2009年，W3C提出了一種新的佈局方案—-Flex 佈局，能夠簡便、完整、響應式地實現各類頁面佈局。 目前，它已經獲得了全部瀏覽器的支持，這意味着，如今就能很安全地使用這項功能。

　　一，怎麼運用FLEX佈局
flex佈局很是靈活，任一容器均可以指定爲flex佈局。塊狀只須要display屬性規定爲flex便可。 行內元素也能夠指定爲flex佈局，將display屬性設置爲inline-flex。 還有WebKit內核的瀏覽器須要加上-webkit前綴。 須要注意的是設置成爲flex佈局以後，子元素的float，clear，text-align，vertical-align就會失效。

　二，基本概念
採用flex佈局的元素就被稱爲flex容器（flex contain），它的全部子元素稱爲flex項目（flex item）。 容器默認存在兩根軸線，一根主軸（main axis）一根交叉軸（cross axis）。 項目默認沿主軸排列，單個項目佔據的主軸空間叫main size，佔據的交叉軸空間叫cross size.

　　三. FLEX-BOX容器屬性

1.flex-direction 決定項目在主軸的排列方向。
2.flex-wrap 決定若是一條軸線排不下了，該如何換行。
3.flex-flow 是flex-direction和wrap的簡寫形式，默認row nowrap。
4.justify-content 決定項目在主軸方向上如何對齊。
5.align-items 決定項目在交叉軸上如何對齊。
6.align-content 定義多根軸線如何對齊。

 四. FLEX項目屬性

1.order 決定項目的排列順序，數值越小，排列越靠前。
2.flex-grow 決定項目的放大比例，默認值是0，也就是存在剩餘空間，不放大。
3.flex-shrink 是也就是決定項目的縮小比例，默認是1，表示剩餘空間不足時，等比縮小，若是須要不變，能夠設置爲0。
4.flex-basis 定義了在分配多餘項目以前，項目佔據的主軸空間。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的原本大小。它能夠設爲跟width或height屬性同樣的值（好比350px），則項目將佔據固定空間。
5.flex 是以上三個的簡寫，默認0 1 auto，也就是不放大，不縮小，佔據項目原本大小的主軸空間。該屬性有兩個快捷值: auto (1 1 auto) 和 none (0 0 auto)，這裏也不過多贅述。
6.align-self屬性 默認auto，繼承flex容器，也就是父元素的align-items屬性，項目和algn-items同樣，只是決定單個item對交叉軸的對齊方式。

 flex-basic:定義了在分配多餘項目以前，項目佔據的主軸空間；

flex-wrap 決定若是一條軸線排不下了，該如何換行。nowrap |  wrap | wrap-reverse

 

參考文獻：https://blog.csdn.net/qq_27064559/article/details/81871675