搞定flex佈局_ZenDei技術網路在線

這幾種方式的搭配使用可以輕鬆搞定 PC 端頁面的常見需求，比如實現水平居中可以使用 margin: 0 auto，實現水平垂直同時居中可以如下設置：然而，這些寫法都存在一些缺陷：缺少語義並且不夠靈活。我們需要的是通過 1 個屬性就能優雅的實現子元素居中或均勻分佈，甚至可以隨著視窗縮放自動適應。在這 ...

這幾種方式的搭配使用可以輕鬆搞定 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 屬性決定主軸的方向，交叉軸的方向由主軸確定。