你不知道的Flex布局

flex布局

什麼是Flex布局

flex布局表示彈性布局，為盒狀模型提供最大的靈活性。

适用範圍

任何一種元素都可以指定為flex布局

flex布局中的一些基本概念

容器和項目

1. 什麼叫容器

   采用flex布局的元素被稱作容器。

2. 什麼叫項目

   在flex布局中的子元素被稱作項目。

即父級元素采用flex布局，則父級元素為容器，全部子元素自動成為項目。

在容器中預設有水準的主軸和垂直的交叉軸，項目在容器中預設沿主軸排列

容器的一些屬性

有六個常用屬性設定在容器上，分别為：

1. flex-direction

作用：用于設定主軸的方向

可能值：

1. row: 預設值，表示沿水準方向，由左到右。
2. row-reverse ：表示沿水準方向，由右到左 。
3. column：表示垂直方向，由上到下。
4. column-reverse:表示垂直方向，由下到上。

2. flex-wrap

作用：用于設定當項目在容器中一行無法顯示的時候如何處理。

可能值：

1. nowrap：預設值，表示不換行。

   說明：設定的項目的寬度就失效了，強行在一行顯示

2. wrap：正常換行，第一個位于第一行的第一個
3. wrap-reverse：向上換行，第一行位于下方

3. flew-flow

作用：是簡寫屬性，是flex-deriction和flex-wrap屬性的簡寫，預設值為[row nowrap]。

4. justify-content

作用：用于設定項目在容器中的對齊方式。

可能值：

1. flex-start：預設值，左對齊。
2. flex-end：右對齊。
3. center：居中對齊。
4. space-between：兩端對齊。
5. space-around：每個項目兩側的間距相等。

5. align-items

作用：定義了項目在交叉軸上是如何對齊顯示的

可能值:

1. flex-start:交叉軸的起點對齊
2. flex-end 交叉軸的終點對齊
3. center 交叉軸居中對齊
4. baseline 項目的第一行文字的基線對齊
5. stretch：預設值：如果項目未設定高度或者高度為auto，将占滿整個容器的高度

以上幾個屬性都是設定在容器上的

以下幾個屬性都是設定在項目上的

6. order

作用： 用于排序，設定在項目上面。預設值為零。數值越小在容器中越靠前。

7.flex-grow

作用： 定義了項目的放大比例，預設為0，0時，如果存在剩餘空間也會放大。

8.flex-shrink

作用： 定義了項目的縮小比例，預設為1，空間不夠時0不縮小；

9.flex-basic

作用： 定義了在配置設定之前，項目占主軸的空間；

10.flex

作用： 是一個簡寫屬性，由flex-grow，flex-shrink，flex-basic組成，預設值是：0 1 auto；

11.align-self

作用：align-self屬性表示目前項目可以和其他項目擁有不一樣的對齊方式，用于覆寫align-items

使用時應該注意些什麼？

如果是Webkit核心的浏覽器，需要加上 -webkit 字首

在父級元素設定為flex布局後，子元素的float、clear、vertical-align屬性都将失效，是以在使用flex布局時，不應該先設定完子元素布局後再使用。

推薦閱讀：

CSS布局盒子模型之定位屬性（position)