一、預告

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

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。

轉載于:https://www.cnblogs.com/st-leslie/p/6493224.html

總結

以上是生活随笔為你收集整理的flex布局应用与踩坑的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。