flex布局是一種可以完美的解決響應的布局，非常的美妙。關於flex布局的屬性太多太多了。但是我們掌握最關鍵，常見的布局，就是可以的了。
flex布局包括兩個東西，一個叫做容器，還有一個叫做 flex項目 ,這樣子說起來好累，我們還是上代碼
<div class="box"> // 這個box就是容器
<div class="item"></div>
<div class="item"></div> //里面的內容就是flex項目
</div>
我們操作flex布局，只需要在容器上面，添加一個屬性 display : flex ，如下面的代碼
<div class="box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
.box{
width: 500px;
display: flex;
}
.box .item{
width: 100px;
height: 100px;
margin: 10px;
background: red;
}
沒有給里面的flex項目添加任何屬性，僅僅是設置了一下顯示的長寬的顏色，就可以實現排列布局。
當然，這個顯示就是一個默認的樣式，我們可以給 容器 添加不同的屬性，來實現不同的樣式，那容器都有哪些屬性呢？
1）容器的6個屬性
1）flex-direction
2）flex-wrap
3） flex-flow
4）justify-content
5）align-items
6）align-content
下面再來分別的介紹這些屬性
1）flex-direction
決定了元素的排列的方向，是按照橫着還是豎着排
row（默認值）：主軸為水平方向，起點在左端。
row-reverse：主軸為水平方向，起點在右端。
column：主軸為垂直方向，起點在上沿。
column-reverse：主軸為垂直方向，起點在下沿。
2）flex-wrap
這個屬性的作用呢，就是用來換行的，當內部元素的大小超過了父元素大小，這個時候應該如何換行呢
nowrap（默認）：不換行。
wrap：換行，第一行在上方。
wrap-reverse：換行，第一行在下方。
3）flex-flow
這個屬性是flex-direction和flex-wrap的簡寫形式，它的默認值是row nowrap
4）justify-content
上面介紹的都是一些基礎的屬性，下面開始有趣的就來了，這個justify-content定義了項目在主軸上的對其的方式
flex-start（默認值）：左對齊
flex-end：右對齊
center：居中
space-between：兩端對齊，項目之間的間隔相等，一前一后，其余的在中間
space-around:等間距對其，最前和最后的兩個與邊框的距離是等間距的一半
5）align-items
這個屬性定義了在交叉軸上的對齊方式
flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的終點對齊。
baseline：項目的第一行文字的基線對齊。
stretch（默認值）：如果項目沒有設置高度或者高度設置為了auto,將占滿整個容器的高度。
6）align-content
該屬性定義了多根軸線上的對齊方式，如果項目只有一根軸線，則該屬性不起作用
flex-start：與交叉軸的起點對齊
flex-end：與交叉軸的終點對齊
center：與交叉軸的中點對齊
space-between：與交叉軸的兩端對齊，軸線之間的間隔平均的分布
space-around：每個軸線的兩側相等，前后的距離邊框的間隔減半
stretch（默認值）：軸線占滿整個交叉軸
2）說完了容器的布局，下面來接着聊聊容器里面項目的布局，項目的6分屬性如下
1）order
2）flex-grow
3）flex-shrink
4）flex-basis
5）flex
6）align-self
接下來詳細的理解這6個屬性，掌握它們的用法
1）order屬性
定義項目的排列順序，數值越小，則排列的越是靠前
2）flex-grow
定義項目的放大的比例，默認為0不放大，即使空間有空余。也好、不會撐開
如果此項目設置為2，它的隔壁設置為1，則該項目的尺寸大小為它隔壁的兩倍。並且一起撐滿不覺
如果設置全部都是為1，則大家好的一起按照同樣的大小撐滿整個布局
3）flex-shrink
定義了項目的縮小比例，與放大比例類似。只不過默認為1，如果空間不足的話，則項目就會縮小。
如果此項目設置為0，但是它的姐妹們設置為1，則空間不足的時候，它的姐妹們縮小，它保持不變。
4）flex-basis
該屬性定義了，在分配多余空間之前，項目占據的主軸空間。瀏覽器根據這個屬性，來計算是否還有多余的空余空間。
它的默認值是auto，即項目本來的大小。它也可以自己設置width和height的值。比如350px。這個時候，這個項目
將占據固定的空間。
5）flex屬性
這個屬性是flex-grow和flex-shrink以及flex-basis屬性的集合。默認值是0 1 auto。后面這兩個屬性是可選的
該屬性有兩個快捷鍵。分別是auto（1 1 auto）和 none（0 0 auto），在此建議優先寫這寫這個屬性，而不是
分開寫那三個屬性，因為瀏覽器會做相應的計算的。
6）align-self
這個屬性允許單個項目和其他項目的屬性不一樣的對齊方式，可以用來覆蓋align-items屬性，它的默認值是auto，
表示繼承父元素的align-items的屬性，如果沒有父元素，這等同於stretch
該屬性有6個值，除了auto之外，其他的全部和align-item一樣
···是不是很惡心？這么多的屬性，我都懵逼了好嗎。。我抽取出來比較重要的幾個屬性，這里詳細的整理一下。
關於flex項目的六個熟悉，這三個是值得仔細的琢磨的
1） flex-grow 表示項目的放大的倍數，默認值為 0 ，表示即使容器存在多余的空間，也不放大，還是保持自己原來的樣子。看圖
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ padding: 0px; margin:0px; } .box{ width: 800px; border: 4px solid #ccc; display: flex; } .box .item{ width: 100px; height: 100px; margin: 10px; background: red;
flex-grow: 0; } </style> </head> <body> <div class="box"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> </body> </html>
可以看到。容器box是沒有被填滿的。項目的寬度，就是自己設置的 width 的取值
2）如果設置為了1，則表示這些項目會放大，撐滿這個容器。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ padding: 0px; margin:0px; } .box{ width: 800px; border: 4px solid #ccc; display: flex; } .box .item{ width: 100px; height: 100px; margin: 10px; background: red; flex-grow: 1; } </style> </head> <body> <div class="box"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> </body> </html>
這個時候再來看樣式，可以看到，此時的容器已經被等比例的填滿了，項目的寬度已經不是自己設置的那個width了
當然了，這里我們設置的是所有的項目的放大倍數都是1，那如果每一個元素的放大倍數不一樣呢？會是什么樣子的？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ padding: 0px; margin:0px; } .box{ width: 800px; border: 4px solid #ccc; display: flex; } .box div{ width: 100px; height: 100px; } .item1{ flex-grow: 2; background: red; } .item2{ flex-grow: 1; background: blue; } .item3{ flex-grow: 0; background: yellow; } .item4{ flex-grow: 1; background: orange; } </style> </head> <body> <div class="box"> <div class="item1"></div> <div class="item2"></div> <div class="item3"></div> <div class="item4"></div> </div> </body> </html>
這里為了排除margin占據容器大小，我將上面代碼中的項目之間margin刪除了，改成了不同項目的不同的顏色，便於肉眼的觀看。
自己運行代碼，可以看出來，最后寬度分別為 300px 200px 100px 200px 加起來是800px
這里是不是納悶了？這個寬度到底是怎么計算的呢？
可以看到，項目3沒有放大，因此寬度仍然為100px,那么剩下的三個寬度，不應該是按照2：1：1等分的嗎？
但是很明顯不是300：200：200 這個比例不是2：1：1 ，是因為其中的另外一個項目屬性，起到了作用。就是flex-basis屬性。下面整理一下
flex-basis屬性
這個屬性定義了在分配多余空間之前，項目占據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。
這句話什么意思呢？拿剛剛的例子。由於flex-basis默認值是auto，就是項目本來的大小，那么，在剛才的例子中，就是100px;
那么？容器還剩多少的空間呢？很明顯800-100-100-100-100=400px;
現在容器還剩余400px的大小，我們又指定了項目的放大的倍數，那么這個400px會被按照指定的倍數等分，也就是2+1+0+1=4（份）
最后 ，每個項目的實際大小=分得的像素大小 + flex-basis
這樣子就可以解釋我們剛剛的問題了
下一章節，具體整理一下 flex-basis屬性。