前戲
在正式開始接觸彈性盒子布局之前耸棒，我們先稍微寫一點代碼看看效果。
<div class="container">
<div class="box"></div>
</div>
.container {
min-height: 100vh;
display: flex;
}
.box {
width: 150px;
height: 150px;
background: #ffaaaa;
margin: auto;
}
在這里报辱，我們創(chuàng)建了一個容器和其內(nèi)部的方塊与殃，并將容器display屬性設(shè)置為flex“郑可以看到幅疼，對容器內(nèi)的方塊，我們只是添加了 margin: auto; 這一行代碼鸵赫，便實現(xiàn)了其相對容器水平與垂直上的完全居中衣屏。也就是說躏升，flexbox首先便解決了css一直以來在垂直居中上的痛點辩棒。
Flexbox簡介
先丟一張MDN上面關(guān)于彈性盒布局的介紹圖
沒看懂的話沒有關(guān)系，這里是MDN的官方文檔，認(rèn)真看一睁。
以上
钻弄。。者吁。
啊不是窘俺，沒看懂的話接著往下看。
Flexbox示例
要使用彈性盒布局复凳，首先便要定義一個彈性容器（flex container）瘤泪。彈性容器可以通過設(shè)置display的值為flex或inline-flex定義，其中flex會被外界視為塊級元素育八，而inline-flex則會被視為行內(nèi)元素对途。處在彈性容器內(nèi)部的元素，就被視為彈性項目（flex item）.
flex container
在上面的例子中髓棋，container元素已經(jīng)被添加了 display: flex; 屬性实檀，也就是說，container元素已經(jīng)作為一個彈性容器存在按声，而box元素就是一個彈性項目膳犹。
基于上面的例子，我們做一些修改签则。
- 將box的margin屬性刪掉须床，這里暫時用不到它了。
- 將原本的1個box元素復(fù)制為6個.
刷新頁面怀愧，我們會發(fā)現(xiàn)6個box元素擠在了一起侨颈，這并不彈性。
在這里芯义，只需要為彈性容器添加一條屬性
.container {
padding: 20px;
display: flex;
justify-content: space-around;
}
刷新頁面哈垢，6個box便已經(jīng)均勻地分布在這一行上了。
在介紹justify-content屬性之前扛拨，我們先了解一下主軸的概念：
主軸就是彈性項目在彈性容器的排布方向耘分，默認(rèn)是橫向從左到右的，也就是說绑警，在向彈性容器中塞元素的時候求泰，默認(rèn)是從左到右一個一個放好的。 當(dāng)然计盒，主軸的方向是可變的渴频，可以是從右向左，甚至可以是從上到下的北启。主軸的方向由屬性flex-direction控制卜朗。
flex-direction: row | row-reverse | column | column-reverse
而justify-content屬性控制的便是彈性項目在主軸上的對齊方式拔第，之前6個box擠在了一起，是因為該屬性默認(rèn)是向主軸的起點對齊场钉。而后我們將justify-content設(shè)置為space-around蚊俺，作用就是使主軸上的彈性項目均勻分布。
justify-content: flex-start | flex-end | center | space-between | space-around;
接下來我們向容器內(nèi)再加一些方塊逛万。將原來的6個box再復(fù)制一遍泳猬，現(xiàn)在容器內(nèi)有12個方塊了。刷新頁面宇植，我們發(fā)現(xiàn)這些方塊又連成了一片得封，甚至還超出了容器的邊界，這并不彈性指郁。
于是我們需要為彈性容器再添加一條屬性
.container {
padding: 20px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.box {
width: 150px;
height: 150px;
background: #ffaaaa;
margin: 10px 0;
}
為了便于觀察呛每，我們?yōu)閎ox添加一點外邊距。再次刷新坡氯，可以看到多出來的方塊排列到了下一行晨横，而且當(dāng)我們調(diào)整瀏覽器窗口大小時，方塊們會自動排列整齊箫柳。
在這里我們需要了解關(guān)于側(cè)軸的概念：
側(cè)軸是定義彈性容器內(nèi)是否以多行顯示手形，以及多行的排布方向。側(cè)軸的方向與主軸是垂直的悯恍，如果主軸是橫向的库糠，那么側(cè)軸就是縱向的，反之亦然涮毫。側(cè)軸由屬性flex-wrap控制瞬欧，默認(rèn)為單行顯示，也就是不換行罢防。（主軸與側(cè)軸的屬性可以簡寫為flex-flow艘虎。例如 flex-flow: row wrap;）。
flex-wrap: nowrap | wrap | wrap-reverse
側(cè)軸與主軸一樣可以定義行在側(cè)軸線的對齊方式咒吐，由屬性align-content控制野建。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
接著我們修改幾個方塊的高度，讓它們看起來不那么一樣恬叹。
.box:nth-child(1) {
height: 200px;
}
.box:nth-child(2) {
height: 350px;
}
.box:nth-child(1) {
height: 250px;
}
.box:nth-child(4) {
height: 300px;
}
可以看到一行的高度是由這一行內(nèi)最高的元素決定的候生，那么怎樣讓元素相對這一行的高度垂直居中呢。
.container {
padding: 20px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
align-items: center;
}
這樣绽昼，就控制了每一行的元素都以該行的中間位置對齊唯鸭。而align-items屬性控制的便是行內(nèi)項目的對齊方式。
align-items: flex-start | flex-end | center | baseline | stretch
flex items
以上介紹的都是為彈性容器定義的屬性硅确，而我們同樣可以為每個彈性容器分別定義不同的屬性目溉。
order：控制彈性項目在彈性容器中布局的順序唠粥。例如我們將原本的最后一個方塊的order值設(shè)置為-1，因為其他方塊的order均為默認(rèn)值0停做，則最后一個方塊將會排在第一位。
order: <integer>
align-self：為單獨的伸縮項目定義在行內(nèi)的對齊方式（對應(yīng)align-items）
align-self: auto | flex-start | flex-end | center | baseline | stretch;
最后的三個屬性都與彈性項目本身的縮放有關(guān)大莫，放在一起來說蛉腌。
我們將上面的示例再稍微改動一下。首先將方塊們都刪掉只厘，留下四個就可以烙丛。然后為了便于觀察，為這四個方塊設(shè)置不同的背景顏色羔味。最后分別為他們添加flex-grow屬性河咽，并設(shè)置不同的值，例如：
.box:nth-child(1) {
background: #ffaaaa;
flex-grow: 2;
}
.box:nth-child(2) {
background: #f2ffaa;
flex-grow: 1;
}
.box:nth-child(3) {
background: #aaffc4;
flex-grow: 4;
}
.box:nth-child(4) {
background: #c8aaff;
flex-grow: 3;
}
刷新頁面赋元，我們發(fā)現(xiàn)四個方塊之間沒有了間距忘蟹，并且似乎都寬了不少。
不難看出搁凸，flex-grow屬性定義的便是彈性項目的擴展能力媚值。但需要注意的是，flex-grow與其他方塊的值是成比例的护糖。例如上述示例中褥芒，四個方塊的屬性值分別為2您旁、1张峰、4踏兜、3还最，總和為10挣棕，則方塊1擴展能力就是2/10讶踪，它能占用的剩余空間就是1/5的大小零如。而如果只有一個方塊定義了flex-grow屬性溜在，因為其他方塊值均為默認(rèn)值0（不擴展）很澄，那么無論這個方塊的flex-grow屬性為多少漓帅，它都將得到全部的剩余空間。
flex-grow: <number>; /* default 0 */
與之相對應(yīng)的痴怨，就是flex-shrink屬性忙干。該屬性定義彈性項目的收縮能力。在容器縮小時隨著容器等比例縮小浪藻。
flex-shrink: <number>; /* default 1 */
flex-basis：這個屬性定義彈性項目在主軸上所占的長度捐迫。很容易理解，與寬度類似爱葵，但與寬度不同的是施戴，flex-basis是在主軸方向上的長度反浓，也就是說，如果主軸是縱向的赞哗，那么它定義的就是高度（可以這樣理解）雷则。
flex-grow, flex-shrink, flex-basis可以簡寫為flex屬性，例如 flex: 2 2 20%;
結(jié)語
關(guān)于flexbox布局各屬性的詳細(xì)信息如果仍有疑問請手動查閱MDN文檔
