Flex布局必然的選擇

這篇文章是我在阮一峰老師的flex布局教程下，按照自己的理解重寫寫一遍，以便增強理解。如果你來到這裡最好去看一下阮一峰大神的flex布局教程

正式開始自己的。

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樣式，也不能太難看

divuldiv lili:nth-child(n)li:nth-child(2n)

最終展現在我們眼前的效果就是

這個留著備用，我們繼續開始下面的流程。

2.作用在容器上面的6大屬性

flex-direction

align-items

justify-content

align-content

flex-wrap

flex-flow

2.1首先看第乙個flex-direction屬性

在之前我們設定好得li列表上面我們做一下改動，給div增加新的樣式，為了方便容易看，我就直接在之前的樣式後面繼續為 div 下ul元素新增樣式。

div ul

看一下效果

從原本的橫向排列，變成了縱向排列。而且之前我們設定的每個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之後，看一下

flex-wrap，預設是nowrap。不換行。所以就導致了我們之前的那種情況，現在我們設定成wrap，讓他根據寬度來決定是否換行。這樣一來，就和float一樣了。而且更加方便。flex-wrap還有乙個屬性

也就是顛倒個個。

2.3flex-flow也就是flex-direction和flex-wrap的結合體，沒什麼好說的啦！

也就是設定垂直方向的排列方式，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，樣式為

可以看到第五個fifth排到了第一位！！這就很方便了。也很實用，說實話，我剛剛發現這個屬性的時候就想發現新大陸一樣激動（鬼知道哥倫布怎麼想的）

3.2、flex-grow屬性。設定放大比例，預設值是0，例如我們給最後乙個li增加屬性

li:last-child

3.3、flex-shrink就是縮小比例了。這個就不多說了。

3.4、flex-basis屬性則定義了在分配多餘空間之前，專案佔據的主軸空間。

3.5、flex屬性就是結合體.....我不是很熟練。還是乙個個寫吧

3.6、align-self也就是乙個特立獨行的存在。改變自己的排列方式。

Flex布局必然的選擇

flex布局 Flex布局

布局（flex布局）

flex 平鋪布局 Flex 布局教程

Flex布局 必然的選擇

flex布局 Flex布局

布局（flex布局）

flex 平鋪布局 Flex 布局教程

相關推薦

Flex布局必然的選擇