網頁佈局在前端開發過程中，一直佔有舉重輕重的作用。它要求我們高保真的還原UI設計師的設計稿，還要求能夠適配不同的機型裝置，原始的佈局，經常採用position、float等定位方式，這種方式在頁面開發過程中，響應式方面會顯得比較凌亂、繁瑣。而且瑣碎的css程式碼也不易維護。在css的發展過程中，逐漸出現了許多的響應式佈局方式，今天將介紹的flex佈局，就是其中一種。
flex佈局，能夠將容器，按照特定的比例進行劃分，從一維的角度，去更好的對容器進行佈局。

• flex容器
• flex專案

flex容器

任何元素都能作為flex容器，只要使用display:flex，進行描述，該容器就成為了一個flex容器。以前在使用過程中，我一直有一個誤區，認為只有塊級元素才能作為一個flex容器。其實行內元素也是可以稱作flex容器的。可以看到塊級元素和內聯元素使用flex佈局後，能達到一樣的效果。

flex容器屬性:能夠定義在flex容器上的屬性
.flex-direction
. flex-wrap
.flex-flow
.justify-content
.align-content
.align-items

flex-direction規定容器中，flex專案的排列方式。預設情況下是沿著橫軸依次排列。
可取值為：row | row-reverse | column | column-reverse，依次展示效果如下，預設情況不做展示



flex-wrap當佈局的flex元素，超過當前的整體寬度時，設定該屬性，元素將另起一行重新進行排列。
可取值為：wrapper| nowrapper | wrapper-reverse | column-reverse

，依次展示如下



flex-flow是前面兩個屬性之合。
可取值為：row no-wrapper | row wrapper | column no-wrapper | column wrapper按這種順序依次組合。
組合結果這裡不再做展示。
justify-content描述了專案在主軸上的對齊方式，具體如何對齊，取決於當前所定義的軸的方向。
可取值為：flex-start | flex-end | center | space-between | space-around
當flex-direction為row的時候，分別對應一下的結果，可以看到end方向上，留的空白位置較多





space-between：flex元素兩端對齊。
space-around： flex元素本身左右兩邊間距相等。
當flex值為column時，展示結果依次如下所示：





align-items定義了元素在縱軸上的對齊方式。
可取值為：flex-start | flex-end | stretch | center | baseline這裡的結果展示大家可自己試一下。
align-content定義了元素多個軸線上的對齊方式。
可取值為：flex-start | flex-end | stretch | center | space-between | space-around

flex專案

flex專案，為包裹在flex容器下的子元素，只要父元素用display:flex定義了，這個父元素下的item就全部變成了flex專案，預設情況下，為橫向排列，寬度只相等的，展現形式類似塊級元素的dom結構。
flex專案屬性:能夠定義在flex專案上的屬性
. order
.flex-grow
.flex-shrink
.flex-basis
.flex
.align-self

order規定了flex專案，按照什麼樣的順序展示。
flex-grow規定了flex專案放大顯示的倍數。下圖展示了其他專案為1，2專案放大3倍時的展示情況，如果不設定該屬性，預設為1，即使在有剩餘空間的情況下也不會自動放大。

flex-shrink規定了flex專案縮小顯示的倍數。
flex-basis規定在分配多餘空間時，自動計算的空間值。
flex為上面三個屬性的縮寫值合寫形式，後兩個引數即flex-shrink、flex-basis可以省略。一般都取為1
align-self定義了當前專案，與其他專案顯示的差別。
可取值為flex-start | flex-end | center | baseline | stretch

flex佈局，在實際開發過程中，是相當便捷的。而且在響應式開發中，也佔據了很重要的位置，希望本文的基本概念，能給大家帶來些收穫。