flex布局應用與踩坑

一、預告

本文不是一篇入門的文章所有請符合以下條件的戰斗人員繞道：

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這個屬性，這個是用來定義item的百分比以及縮放的，其他的一些屬性就不在這個一一列舉：具體詳見

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 style="float: left"></div> -->
    </div>

 

運行的結果是：

圖一

改變一下flex-diirection后，代碼如下：

<div style="height: 200px;width: 400px;border:1px solid black;display: flex;justify-content: center;flex-direction: column;">
        <div style="flex: 0 0 30%;background: red"></div>
        <!-- <div style="float: left"></div> -->
    </div>

圖二

上面的這個小例子告訴我們，其實在應用flex的時候，我們應該要注意一下justify-content,align-content,align-items這些屬性是相對於主軸的位置來定義的，flex-direction的屬性發生了變化，也就是主軸的位置發生了變化，自然這些屬性也發生了改變（例如上面的justify-content是水平居中的，但是主軸flex-direction:column設置之后，就是垂直居中）

 

2、flex的子元素不受float的影響

<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%;float: right"></div>
    </div>

效果參照圖1

 

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。