這篇文章是我在阮一峰老師的flex布局教程下，按照自己的理解重寫寫一遍，以便增強理解。如果你來到這里最好去看一下阮一峰大神的Flex布局教程
正式開始自己的。
說起布局方式，大家首先要了解css3有哪些布局方式，這里就不一一詳解了。網上一大堆，而且平時寫css3的時候大家一般也都會用到。
Flex布局：
1.概念：flex布局，英文全稱為：Flexible Box 也就是彈性盒子的意思。設置flex布局的元素叫做容器，其他的子元素叫做項目。恩，我之前還真不知道叫做項目，沒注意過。在容器中存在着兩根軸：主軸（水平）和交叉軸（垂直）。
然后我們先創建一個正常的li列表
<div> <ul> <li>first</li> <li>second</li> <li>third</li> <li>forth</li> <li>fifith</li> </ul> </div>
在簡單設置一下css樣式，也不能太難看
div{ height: 500px; width: 500px; margin:0 auto; background-color: #333; } ul{ padding: 20px; box-sizing: border-box; } div li{ list-style: none; display: block; width: 200px; height:50px; text-align: center; line-height: 50px; font-size: 30px;
margin：10px; } li:nth-child(n){ background-color: #007aff; } li:nth-child(2n){ background-color: #8a6de9; color: #fff; }
最終展現在我們眼前的效果就是
這個留着備用，我們繼續開始下面的流程。
2.作用在容器上面的6大屬性
flex-direction
align-items
justify-content
align-content
flex-wrap
flex-flow
2.1首先看第一個flex-direction屬性
在之前我們設置好得li列表上面我們做一下改動，給div增加新的樣式，為了方便容易看，我就直接在之前的樣式后面 繼續為 div 下ul元素添加樣式。
div ul{ display: flex; }
看一下效果
從原本的橫向排列，變成了縱向排列。而且之前我們設置的 每個li 的寬度已經不起作用了。當我們設置display:flex;的時候，主軸默認的方向是水平方向也就是我們看到的樣子。所以我們可以通過改變主軸的方向來隨意調整我們li的排列方式。
/*設置主軸方向為垂直方向*/ flex-direction: column; /*設置主軸方向為垂直方向，從下往上*/ flex-direction: column-reverse; /*設置主軸方向為水平方向，從左往右*/ flex-direction: row; /*設置主軸方向為水平方向，從右往左*/ flex-direction: row-reverse; flex-direction: inherit;
flex-direction有五個屬性，也可以說四個，畢竟最后一個可以省去。我們只要記着兩個就行，column代表着垂直方向，row代表着水平方向。
2.2、這里我們看一下flex-wrap屬性。
上面我們看到，設置成flex布局之后，li的寬度發生了變化，而且沒有換行，擠在了一起。給樣式加上flex-wrap之后，看一下
div ul{ display: flex; flex-wrap: wrap; }
flex-wrap，默認是nowrap。不換行。所以就導致了我們之前的那種情況，現在我們設置成wrap，讓他根據寬度來決定是否換行。這樣一來，就和float一樣了。而且更加方便。flex-wrap還有一個屬性
div ul{ display: flex; flex-wrap: wrap-reverse; }
也就是顛倒個個。
2.3flex-flow也就是flex-direction和flex-wrap的結合體，沒什么好說的啦！
2.4justify-content
div ul{ display: flex; flex-wrap: wrap; justify-content: center; }
也就是設置垂直方向的排列方式，center就是居中。另外還有其他屬性space-between;space-around;這兩個屬性可以說是我經常用到的屬性。
2.4align-item這個就是水平方向的設置了。也justify-content相對應。也就不舉栗子了。
2.5align-content屬性定義的是多根線軸的對齊方式。具體樣式也上面那兩位幾乎一樣的。
3、在項目上的6大屬性。
order
flex-grow
flex-shrink
flex-basis
align-self
3.1、order，設置數值，數值越小越靠前。例如我們給最后一個li添加order屬性。設置為-1，樣式為
li:last-child{ order: -1; }
可以看到第五個fifth排到了第一位！！這就很方便了。也很實用，說實話，我剛剛發現這個屬性的時候就想發現新大陸一樣激動（鬼知道哥倫布怎么想的）
3.2、flex-grow屬性。設置放大比例，默認值是0，例如我們給最后一個li增加屬性
li:last-child{ flex-grow: 1; }
3.3、flex-shrink就是縮小比例了。這個就不多說了。
3.4、flex-basis屬性則定義了在分配多余空間之前，項目占據的主軸空間。
3.5、flex屬性就是結合體.....我不是很熟練。還是一個個寫吧
3.6、align-self也就是一個特立獨行的存在。改變自己的排列方式。