一勞永逸的搞定 flex 佈局

osimly發表於2017-04-19

尋根溯源話佈局

一切都始於這樣一個問題:怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候,看到 float 屬性不由得感覺眼前一亮,順理成章的聯想到 Word 文件排版中用到的的左對齊、右對齊和居中對齊,然而很快就失望的發現 CSS 中並不存在 float: center 的寫法,那麼 text-align: centerverticle-align: center 是否可行呢?答案也是否定的。這兩個屬性只能用於行內元素,對於塊級元素的佈局是無效的。

在網頁佈局沒有進入 CSS 的時代,排版幾乎是通過 table 元素實現的,在 table 的單元格里可以方便的使用 alignvalign 來實現水平和垂直方向的對齊,隨著 Web 語義化的流行,這些寫法逐漸淡出了視野,CSS 標準為我們提供了 3 種佈局方式:標準文件流浮動佈局定位佈局。這幾種方式的搭配使用可以輕鬆搞定 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
}複製程式碼

一勞永逸的搞定 flex 佈局

就是這麼簡單,大功告成。等等,好像哪裡不對,justify-contentalign-items 是啥?哪裡可以看出橫向、豎向的語義?是的,flex 的確沒有那麼簡單,這就要從兩個基本概念說起了。

一勞永逸的搞定 flex 佈局

說來也不難,flex 的核心的概念就是 容器。容器包括外層的 父容器 和內層的 子容器,軸包括 主軸交叉軸,可以說 flex 佈局的全部特性都構建在這兩個概念上。flex 佈局涉及到 12 個 CSS 屬性(不含 display: flex),其中父容器、子容器各 6 個。不過常用的屬性只有 4 個,父容器、子容器各 2 個,我們就先從常用的說起吧。

1. 容器

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

一勞永逸的搞定 flex 佈局

1.1 父容器

  • 設定子容器沿主軸排列:justify-content

justify-content 屬性用於定義如何沿著主軸方向排列子容器。

一勞永逸的搞定 flex 佈局

flex-start:起始端對齊

一勞永逸的搞定 flex 佈局

flex-end:末尾段對齊

一勞永逸的搞定 flex 佈局

center:居中對齊

一勞永逸的搞定 flex 佈局

space-around:子容器沿主軸均勻分佈,位於首尾兩端的子容器到父容器的距離是子容器間距的一半。

一勞永逸的搞定 flex 佈局

space-between:子容器沿主軸均勻分佈,位於首尾兩端的子容器與父容器相切。

一勞永逸的搞定 flex 佈局

  • 設定子容器如何沿交叉軸排列:align-items

    align-items 屬性用於定義如何沿著交叉軸方向分配子容器的間距。

一勞永逸的搞定 flex 佈局

flex-start:起始端對齊

一勞永逸的搞定 flex 佈局

flex-end:末尾段對齊

一勞永逸的搞定 flex 佈局

center:居中對齊

一勞永逸的搞定 flex 佈局

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

一勞永逸的搞定 flex 佈局

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

一勞永逸的搞定 flex 佈局

1.2 子容器

  • 在主軸上如何伸縮:flex

一勞永逸的搞定 flex 佈局

子容器是有彈性的(flex 即彈性),它們會自動填充剩餘空間,子容器的伸縮比例由 flex 屬性確定。

flex 的值可以是無單位數字(如:1, 2, 3),也可以是有單位數字(如:15px,30px,60px),還可以是 none 關鍵字。子容器會按照 flex 定義的尺寸比例自動伸縮,如果取值為 none 則不伸縮。

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

一勞永逸的搞定 flex 佈局

  • 單獨設定子容器如何沿交叉軸排列:align-self

一勞永逸的搞定 flex 佈局

每個子容器也可以單獨定義沿交叉軸排列的方式,此屬性的可選值與父容器 align-items 屬性完全一致,如果兩者同時設定則以子容器的 align-self 屬性為準。

flex-start:起始端對齊

一勞永逸的搞定 flex 佈局

flex-end:末尾段對齊

一勞永逸的搞定 flex 佈局

center:居中對齊

一勞永逸的搞定 flex 佈局

baseline:基線對齊

一勞永逸的搞定 flex 佈局

stretch:拉伸對齊

一勞永逸的搞定 flex 佈局

2. 軸

如圖所示, 包括 主軸交叉軸,我們知道 justify-content 屬性決定子容器沿主軸的排列方式,align-items 屬性決定子容器沿著交叉軸的排列方式。那麼軸本身又是怎樣確定的呢?在 flex 佈局中,flex-direction 屬性決定主軸的方向,交叉軸的方向由主軸確定。

一勞永逸的搞定 flex 佈局

  • 主軸

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

向右:flex-direction: row

一勞永逸的搞定 flex 佈局

向下:flex-direction: column

一勞永逸的搞定 flex 佈局

向左:flex-direction: row-reverse

一勞永逸的搞定 flex 佈局

向上:flex-direction: column-reverse

一勞永逸的搞定 flex 佈局

  • 交叉軸

    主軸沿逆時針方向旋轉 90° 就得到了交叉軸,交叉軸的起始端和末尾段也由 flex-startflex-end 表示。

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


flex 進階概念

1. 父容器

  • 設定換行方式:flex-wrap

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

一勞永逸的搞定 flex 佈局

nowrap:不換行

一勞永逸的搞定 flex 佈局

wrap:換行

一勞永逸的搞定 flex 佈局

wrap-reverse:逆序換行

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

一勞永逸的搞定 flex 佈局

  • 軸向與換行組合設定:flex-flow

    flow 即流向,也就是子容器沿著哪個方向流動,流動到終點是否允許換行,比如 flex-flow: row wrapflex-flow 是一個複合屬性,相當於 flex-direction 與 flex-wrap 的組合,可選的取值如下:

    • rowcolumn 等,可單獨設定主軸方向

    • wrapnowrap 等,可單獨設定換行方式

    • row nowrapcolumn wrap 等,也可兩者同時設定

  • 多行沿交叉軸對齊:align-content

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

一勞永逸的搞定 flex 佈局

flex-start:起始端對齊

一勞永逸的搞定 flex 佈局

flex-end:末尾段對齊

一勞永逸的搞定 flex 佈局

center:居中對齊

一勞永逸的搞定 flex 佈局

space-around:等邊距均勻分佈

一勞永逸的搞定 flex 佈局

space-between:等間距均勻分佈

一勞永逸的搞定 flex 佈局

stretch:拉伸對齊

一勞永逸的搞定 flex 佈局

2. 子容器

  • 設定基準大小:flex-basis

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

一勞永逸的搞定 flex 佈局

一勞永逸的搞定 flex 佈局

  • 設定擴充套件比例:flex-grow

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

一勞永逸的搞定 flex 佈局

一勞永逸的搞定 flex 佈局

  • 設定收縮比例:flex-shrink

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

一勞永逸的搞定 flex 佈局

一勞永逸的搞定 flex 佈局

  • 設定排列順序:order

    改變子容器的排列順序,覆蓋 HTML 程式碼中的順序,預設值為 0,可以為負值,數值越小排列越靠前。

一勞永逸的搞定 flex 佈局


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

一勞永逸的搞定 flex 佈局


參考資料:

相關文章