css 布局（轉載）

標籤：ever   無效   display   ret   它的   自動填滿   zoom   不同   預設   

 一勞永逸的搞定 flex 布局尋根溯源話布局

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

在網頁布局沒有進入 CSS 的時代，排版幾乎是通過 table 元素實現的，在 table 的儲存格裡可以方便的使用 align、valign 來實現水平和垂直方向的對齊，隨著 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}

 

 

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

 

 

說來也不難，flex 的核心的概念就是 容器 和 軸。容器包括外層的 父容器 和內層的 子容器，軸包括 主軸 和 交叉軸，可以說 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 個，可以隨時通過進行回顧。

 

   

 

 

 

轉載地址：https://juejin.im/post/58e3a5a0a0bb9f0069fc16bb

  

 

css 布局（轉載）