一勞永逸的搞定 flex 佈局

尋根溯源話佈局

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

在網頁佈局沒有進入 CSS 的時代,排版幾乎是經過 table 元素實現的,在 table 的單元格里能夠方便的使用 alignvalign 來實現水平和垂直方向的對齊,隨着 Web 語義化的流行,這些寫法逐漸淡出了視野,CSS 標準爲咱們提供了 3 種佈局方式:標準文檔流浮動佈局定位佈局。這幾種方式的搭配使用能夠輕鬆搞定 PC 端頁面的常見需求,好比實現水平居中可使用 margin: 0 auto,實現水平垂直同時居中能夠以下設置:git

.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 佈局。github

flex 基本概念

使用 flex 佈局首先要設置父容器 display: flex,而後再設置 justify-content: center 實現水平居中,最後設置 align-items: center 實現垂直居中。markdown

#dad {
    display: flex;
    justify-content: center;
    align-items: center
}複製代碼

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

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

1. 容器

容器具備這樣的特色:父容器能夠統一設置子容器的排列方式,子容器也能夠單獨設置自身的排列方式,若是二者同時設置,以子容器的設置爲準。學習

1.1 父容器

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

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

flex-start:起始端對齊ui

flex-end:末尾段對齊spa

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-startflex-end 表示。

    上面介紹的幾項屬性是 flex 佈局中最經常使用到的部分,通常來講能夠知足大多數需求,若是實現複雜的佈局還須要深刻了解更多的屬性。


flex 進階概念

1. 父容器

  • 設置換行方式:flex-wrap

    決定子容器是否換行排列,不但能夠順序換行並且支持逆序換行。

nowrap:不換行

wrap:換行

wrap-reverse:逆序換行

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

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

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

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

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

    • row nowrapcolumn 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 個,能夠隨時經過下圖進行回顧。


參考資料:

相關文章
相關標籤/搜索