flex佈局應用與踩坑

1、預告

本文不是一篇入門的文章全部請符合如下條件的戰鬥人員繞道：

一、初學前端，對前端的傳統佈局還不是很熟悉的人

二、後端人員對前端不打算深刻學習的同窗

 

2、開篇

flex佈局本來是好幾個月前就一直想學習的東西，當時flex佈局還算是比較新鮮的玩意，轉眼間flex佈局已經再也不新鮮，並且這些年，隨着瀏覽器對ES6的支持狀況日益加強，使得咱們愈來愈有必要去學習一下怎樣去使用好flex佈局，廢話我也就很少說了，咱們就直奔主題吧

 

3、何爲flex

 說到什麼是flex這裏就引用如下阮一峯老師的定義

佈局的傳統解決方案，基於盒狀模型，依賴 display屬性 + position屬性 + float屬性。它對於那些特殊佈局很是不方便，好比，垂直居中就不容易實現。

我認爲flex佈局最大的優點就是在其的「彈性」，「彈性」主要表如今flex佈局不一樣於盒子模型的百分比佈局和CSS3支持的響應式佈局，如下有幾種狀況是盒子模型中的這些佈局所不便實現的：

一、瀏覽器的視口空間不足，要求視口中的特定塊要按照比例進行縮放

二、應對一些佈局是要以基準線(baseline)對齊的特殊佈局方法

三、須要模塊垂直居中

從應對一些特殊佈局上來講，使用flex確實比盒子模型的佈局更是一種更優的解決方案

 

4、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 佈局教程：語法篇

 

5、一些flex的典型案例與坑

 一、隨着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設置以後，就是垂直居中）

 

二、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

 

三、不能在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>

 運行效果以下：

 

四、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>

運行效果以下：

 

6、flex佈局使用注意事項

flex佈局的兼容性不是太好，至少某些低版本的安卓機上面是不可以識別改佈局的，可是整體上隨着瀏覽器對H5屬性的支持程度的提高，以及一些老式的安卓手機的淘汰，目前該佈局在手機上面仍是有比較好的應用的，可是在使用flex佈局的同時，建議仍是要搭配上gulp或者是grunt等自動化的工具來進行瀏覽器前綴的編譯，這樣一方面能夠節約手動的去添加瀏覽器的兼容性前綴，另外的一方面是能夠解覺手機上面不一樣瀏覽器的差別致使的問題，通常來講flex佈局就是在手機上面使用的，在PC上面因爲須要考慮到IE的支持程度的問題，因此在PC上面仍是不宜去使用flex。