一、預告
1、初學前端，對前端的傳統布局還不是很熟悉的人
2、後端人員對前端不打算深入學習的同學
二、開篇
flex布局原本是好幾個月前就一直想學習的東西，當時flex布局還算是比較新鮮的玩意，轉眼間flex布局已經不再新鮮，而且這些年，隨著瀏覽器對es6的支援情況日益增強，使得我們越來越有必要去學習一下怎樣去使用好flex布局，廢話我也就不多說了，我們就直奔主題吧
三、何為flex
說到什麼是flex這裡就引用以下阮一峰老師的定義
布局的傳統解決方案，基於盒狀模型，依賴 display屬性 + position屬性 + float屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。我認為flex布局最大的優勢就是在其的「彈性」，「彈性」主要表現在flex布局不同於盒子模型的百分比布局和css3支援的響應式布局，以下有幾種情況是盒子模型中的這些布局所不便實現的：
1、瀏覽器的視口空間不足，要求視口中的特定塊要按照比例進行縮放
2、應對一些布局是要以基準線(baseline)對齊的特殊布局方法
3、需要模組垂直居中
從應對一些特殊布局上來說，使用flex確實比盒子模型的布局更是一種更優的解決方案
四、flex布局的基本語法回顧
flex布局的語法比較的簡單，首先我們需要在父節點定義乙個
display:flex;接著我們可以對整個flex進行子節點設定，來設定主軸上的子節點的排列順序
flex-direction:column || row || column-reverse || row-reverse但是這個時候主軸上面的每個節點(item)，預設都是緊貼在一起的要麼靠左要麼靠右(flex-direction:row or flex-direction:row-reverse,且預設的justify-content:flex-start)，所以我們需要通過justify-content來設定主軸上的item之間的排列方式
justify-content:除了可以在主軸上面控制橫向布局，還可以控制主軸上的元素的縱向布局
flex-start | flex-end | center | space-between | space-around;
align-items:flex-start || flex-end || center || baseline || stretch上面說到的是單軸線的問題，但是flex布局不但可以解決單軸上面的布局，還可以解決多軸線上面的布局
align-content:flex-start || flex-end || stretch|| center || space-between || space-around這個時候如果是有某個item需要重新調整布局的話，我們可以使用align-self:
align-self: auto | flex-start | flex-end | center | baseline | stretch;
flex 布局教程：語法篇
五、一些flex的典型案例與坑
1、隨著flex-direction的改變，其他的一些屬性也跟著改變
改變前的**是：
<執行的結果是：div
style
="height: 400px;width: 400px;border:1px solid black;display: flex;justify-content: center;"
>
<
div
style
="flex: 0 0 30%;background: red"
>
div>
div>
圖一改變一下flex-diirection後，**如下：
圖二上面的這個小例子告訴我們，其實在應用flex的時候，我們應該要注意一下justify-content,align-content,align-items這些屬性是相對於主軸的位置來定義的，flex-direction的屬性發生了變化，也就是主軸的位置發生了變化，自然這些屬性也發生了改變（例如上面的justify-content是水平居中的，但是主軸flex-direction:column設定之後，就是垂直居中）
2、flex的子元素不受float的影響
<效果參照圖1div
style
="height: 200px;width: 400px;border:1px solid black;display: flex;justify-content: center;"
>
<
div
style
="flex: 0 0 30%;background: red;height:30%;float: right"
>
div>
div>
3、不能在display中巢狀absolute、relative，這樣布局會失效
<執行效果如下：div
style
="height: 200px;width: 400px;border:1px solid black;display: flex;justify-content: center;"
>
<
div
style
="width: 380px;height: 180px"
>
<
div
style
="flex: 0 0 30%;background: red;height:30%;"
>
div>
div>
div>
4、flex-wrap的預設是nowrap，我們需要設定才回自動換行
<執行效果如下：div
style
="height: 200px;width: 400px;border:1px solid black;display: flex;justify-content: center;"
>
<
div
style
="flex: 0 0 30%;background: red;height:30%;"
>
div>
<
div
style
="flex: 0 0 30%;background: red;height:30%;"
>
div>
<
div
style
="flex: 0 0 30%;background: red;height:30%;"
>
div>
<
div
style
="flex: 0 0 30%;background: red;height:30%;"
>
div>
div>
六、flex布局使用注意事項
flex布局的相容性不是太好，至少某些低版本的安卓機上面是不能夠識別改布局的，但是總體上隨著瀏覽器對h5屬性的支援程度的提公升，以及一些老式的安卓手機的淘汰，目前該布局在手機上面還是有比較好的應用的，但是在使用flex布局的同時，建議還是要搭配上gulp或者是grunt等自動化的工具來進行瀏覽器字首的編譯，這樣一方面可以節約手動的去新增瀏覽器的相容性字首，另外的一方面是可以解覺手機上面不同瀏覽器的差異導致的問題，一般來說flex布局就是在手機上面使用的，在pc上面由於需要考慮到ie的支援程度的問題，所以在pc上面還是不宜去使用flex。
七、彩蛋
flex布局應用
所謂道生 一 一生 二 二生 三 三生萬物。由flex的基本屬性jiflex除了可以實現多個盒子自適應螢幕寬度以外，還可以處理某一行或一列的布局，如在一行上讓元素兩端對齊flex兩端對齊，千里之行始於足下，想要了解flex基本的屬性，請閱flex自適應布局。1 一對多布局 一行對齊多列或者一列對多行...
flex布局應用
flex介紹 了解了flex布局之後,發現其功能非常強大.當指定乙個div display flex之後,裡面的子元素會按flex布局.常用的冊格,各種經典網頁布局,如上左右下,還有一些難搞的css,如內容不佔滿整頁時,footer會上移,而不是在頁面底部等等.這些情況下使用flex可以輕鬆簡潔的實...
flex布局實戰應用
如下圖，訂單列表裡的標題 需求是 地名1 地名2 現實情況可能有以下五種情況 兩個地名都很短 兩個地名都很長 地名1很長，地名2很短 地名1很短，地名2很長 地名1和地名2差不多長 看到上面的需求，我們自然而然能想到的就是使用flex布局 先寫個demo html如下 div class wrap ...