搞定flex布局

這幾種方式的搭配使用可以輕松搞定 PC 端頁面的常見需求，比如實現水平居中可以使用?

margin: 0 auto

，實現水平垂直同時居中可以如下設置：

.dad {position: relative;
}

.son {position: absolute;margin: auto;top: 0;right: 0;bottom: 0;left: 0;
}

.dad {position: relative;
}

.son {width: 100px;height: 100px;position: absolute;top: 50%;left: 50%;margin-top: -50px;margin-left: -50px;
}

然而，這些寫法都存在一些缺陷：缺少語義并且不夠靈活。我們需要的是通過 1 個屬性就能優雅的實現子元素居中或均勻分布，甚至可以隨著窗口縮放自動適應。在這樣的需求下，CSS 的第 4 種布局方式誕生了，這就是我們今天要重點介紹的 flex 布局。

flex 基本概念

使用 flex 布局首先要設置父容器?

display: flex

，然后再設置?

justify-content: center

?實現水平居中，最后設置?

align-items: center

?實現垂直居中。

#dad {display: flex;justify-content: center;align-items: center
}

先從兩個基本概念說起

lex 的核心的概念就是容器和軸。容器包括外層的 父容器 和內層的 子容器，軸包括主軸和 交叉軸，可以說 flex 布局的全部特性都構建在這兩個概念上。flex 布局涉及到 12 個 CSS 屬性（不含

display: flex

），其中父容器、子容器各 6 個。不過常用的屬性只有 4 個，父容器、子容器各 2 個，我們就先從常用的說起吧。

1. 容器

容器具有這樣的特點：父容器可以統一設置子容器的排列方式，子容器也可以單獨設置自身的排列方式，如果兩者同時設置，以子容器的設置為準。

1.1 父容器

設置子容器沿主軸排列：justify-content

justify-content

?屬性用于定義如何沿著主軸方向排列子容器。

flex-start：起始端對齊

flex-end：末尾段對齊

center：居中對齊

space-around：子容器沿主軸均勻分布，位于首尾兩端的子容器到父容器的距離是子容器間距的一半。

space-between：子容器沿主軸均勻分布，位于首尾兩端的子容器與父容器相切。

設置子容器如何沿交叉軸排列：align-items

align-items

?屬性用于定義如何沿著交叉軸方向分配子容器的間距。

flex-start：起始端對齊

flex-end：末尾段對齊

center：居中對齊

baseline：基線對齊，這里的?

baseline

?默認是指首行文字，即?
first baseline
，所有子容器向基線對齊，交叉軸起點到元素基線距離最大的子容器將會與交叉軸起始端相切以確定基線。

stretch：子容器沿交叉軸方向的尺寸拉伸至與父容器一致。

1.2 子容器

在主軸上如何伸縮：flex

子容器是有彈性的（flex 即彈性），它們會自動填充剩余空間，子容器的伸縮比例由

flex

屬性確定。

flex

的值可以是無單位數字（如：1, 2, 3），也可以是有單位數字（如：15px，30px，60px），還可以是

none

關鍵字。子容器會按照

flex

定義的尺寸比例自動伸縮，如果取值為

none

則不伸縮。

雖然

flex

是多個屬性的縮寫，允許 1 - 3 個值連用，但通常用 1 個值就可以滿足需求，它的全部寫法可參考下圖。

單獨設置子容器如何沿交叉軸排列：align-self

每個子容器也可以單獨定義沿交叉軸排列的方式，此屬性的可選值與父容器?

align-items

?屬性完全一致，如果兩者同時設置則以子容器的?

align-self

?屬性為準。

flex-start：起始端對齊

flex-end：末尾段對齊

center：居中對齊

baseline：基線對齊

stretch：拉伸對齊

2. 軸

如圖所示，軸包括主軸和 交叉軸，我們知道

justify-content

屬性決定子容器沿主軸的排列方式，

align-items

屬性決定子容器沿著交叉軸的排列方式。那么軸本身又是怎樣確定的呢？在 flex 布局中，

flex-direction

屬性決定主軸的方向，交叉軸的方向由主軸確定。

主軸

主軸的起始端由?

flex-start

?表示，末尾段由?
flex-end
?表示。不同的主軸方向對應的起始端、末尾段的位置也不相同。

向右：

flex-direction: row

向下：

flex-direction: column

向左：

flex-direction: row-reverse

向上：

flex-direction: column-reverse

交叉軸

主軸沿逆時針方向旋轉 90° 就得到了交叉軸，交叉軸的起始端和末尾段也由

flex-start

和

flex-end

表示。

上面介紹的幾項屬性是 flex 布局中最常用到的部分，一般來說可以滿足大多數需求，如果實現復雜的布局還需要深入了解更多的屬性。

flex 進階概念

1. 父容器

設置換行方式：flex-wrap

　　決定子容器是否換行排列，不但可以順序換行而且支持逆序換行。

nowrap：不換行

wrap：換行

wrap-reverse：逆序換行

逆序換行是指沿著交叉軸的反方向換行。

軸向與換行組合設置：flex-flow

flow 即流向，也就是子容器沿著哪個方向流動，流動到終點是否允許換行，比如

flex-flow: row wrap

，

flex-flow

是一個復合屬性，相當于 flex-direction 與 flex-wrap 的組合，可選的取值如下：

- ```
row
```
  、
```
column
```
  等，可單獨設置主軸方向
- ```
wrap
```
  、
```
nowrap
```
  等，可單獨設置換行方式
- ```
row nowrap
```
  、
```
column wrap
```
  等，也可兩者同時設置

多行沿交叉軸對齊：align-content

當子容器多行排列時，設置行與行之間的對齊方式。

flex-start：起始端對齊

flex-end：末尾段對齊

center：居中對齊

space-around：等邊距均勻分布

space-between：等間距均勻分布

stretch：拉伸對齊

2. 子容器

設置基準大小：flex-basis

flex-basis

?表示在不伸縮的情況下子容器的原始尺寸。主軸為橫向時代表寬度，主軸為縱向時代表高度。

設置擴展比例：flex-grow

子容器彈性伸展的比例。如圖，剩余空間按 1:2 的比例分配給子容器。

設置收縮比例：flex-shrink

子容器彈性收縮的比例。如圖，超出的部分按 1:2 的比例從給子容器中減去。

設置排列順序：order

改變子容器的排列順序，覆蓋 HTML 代碼中的順序，默認值為 0，可以為負值，數值越小排列越靠前

以上就是 flex 布局的全部屬性，一共 12 個，父容器、子容器各 6 個，可以隨時通過下圖進行回顧。

作者：osimly
鏈接：https://juejin.im/post/58e3a5a0a0bb9f0069fc16bb

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/370014.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/370014.shtml
英文地址，請注明出處：http://en.pswp.cn/news/370014.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！