Flexbox指南

Flexbox,也稱為Flexible Box Module,是兩個現代佈局系統之一,以及CSS Grid

介紹

Flexbox,也稱為Flexible Box Module,是兩個現代佈局系統之一,以及CSS Grid。

與CSS Grid(二維)相比,flexbox是一個一維佈局模型。它將基於行或列控制佈局,但不能同時控制佈局。

flexbox的主要目標是允許項目填充其容器提供的整個空間,具體取決於您設置的某些規則。

除非您需要支持IE8和IE9等舊版本的瀏覽器,否則Flexbox可以讓您忘記使用

  • 表格佈局
  • 浮點數
  • clearfix駭客
  • display: table駭客

讓我們進入flexbox,並在很短的時間內成為它的主人。

瀏覽器支持

在撰寫本文時(2018年2月),它得到97.66%的用戶的支持,多年來所有最重要的瀏覽器都實現了它,因此,即使是較舊的瀏覽器(包括IE10 +)也都適用:

Browser support

儘管我們必須等待幾年時間才能讓用戶趕上CSS Grid,但是Flexbox是一項較舊的技術,可以立即使用。

啟用Flexbox

通過設置,將flexbox佈局應用於容器

display: flex;

或者

display: inline-flex;

內容在容器內將使用flexbox對齊。


容器屬性

一些flexbox屬性適用於容器,該容器設置了其項目的一般規則。他們是

  • flex-direction
  • justify-content
  • align-items
  • flex-wrap
  • flex-flow

對齊行或列

我們看到的第一個屬性flex-direction確定容器是否應將其項目對齊為行或列:

  • flex-direction: row將項目放置為,沿文本方向(西方國家從左到右)
  • flex-direction: row-reverse放置物品就像row但方向相反
  • flex-direction: column將項目放在柱子,從上到下訂購
  • flex-direction: column-reverse將項目放在一列中,就像column但方向相反

Rows or columns

垂直和水平對齊

默認情況下,如果flex-directionrow,從頂部開始,如果flex-directioncolumn

Vertical and horizontal alignment

您可以使用以下方式更改此行為:justify-content更改水平對齊方式,以及align-items更改垂直對齊方式。

更改水平對齊

justify-content有5個可能的值:

  • flex-start:與容器的左側對齊。
  • flex-end:對準容器的右側。
  • center:對準容器的中心。
  • space-between:以相等的間距顯示。
  • space-around:以相等的間距顯示

Horizontal alignment

更改垂直對齊

align-items有5個可能的值:

  • flex-start:與容器頂部對齊。
  • flex-end:與容器底部對齊。
  • center:對準容器的垂直中心。
  • baseline:顯示在容器的基線處。
  • stretch:拉伸物品以適合容器。

Vertical alignment

關於的註釋baseline

baseline看起來類似於flex-start在這個例子中,由於我的盒子太簡單了。退房這個Codepen有一個更有用的例子,我是從最初由馬丁·米哈萊克(MartinMichálek)。如您所見,項目尺寸已對齊。

默認情況下,flexbox容器中的項目保持在一行上,將它們縮小以適合該容器。

要強制項目分散到多行中,請使用flex-wrap: wrap。這將根據在flex-direction。使用flex-wrap: wrap-reverse取消此順序。

一種簡寫屬性,稱為flex-flow允許您指定flex-directionflex-wrap在一行中,通過添加flex-direction價值第一,其次是flex-wrap值,例如:flex-flow: row wrap


適用於每個單個項目的屬性

從現在開始,我們已經看到了可以應用於容器的屬性。

單個項目可以具有一定程度的獨立性和靈活性,您可以使用以下屬性更改其外觀:

  • order
  • align-self
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex

讓我們詳細看看它們。

使用訂單在另一個物品之前/之後移動物品

根據項目分配的順序對項目進行排序。默認情況下,每個項目都有訂單0HTML的外觀決定了最終順序。

您可以使用以下方法覆蓋此屬性order在每個單獨的項目上。這是您在項目而非容器上設置的屬性。您可以通過設置負值使一個項目出現在所有其他項目之前。

Moving items before or after another one

使用align-self進行垂直對齊

一個項目可以選擇覆寫容器align-items設置,使用align-self,其具有相同的5個可能值align-items

  • flex-start:與容器頂部對齊。
  • flex-end:與容器底部對齊。
  • center:對準容器的垂直中心。
  • baseline:顯示在容器的基線處。
  • stretch:拉伸物品以適合容器。

Vertical alignment

如有必要,增加或縮小項目

彈性成長

The defaut for any item is 0.

如果將所有項目定義為1,將一個項目定義為2,則較大的元素將佔用兩個“ 1”項目的空間。

彎曲收縮

The defaut for any item is 1.

如果將所有項目定義為1,將一個項目定義為3,則較大的元素將縮小3倍,是其他項。如果可用空間較少,則佔用的空間將減少3倍。

彈性基礎

如果設置為auto,它會根據商品的寬度或高度確定其尺寸,並根據商品的尺寸添加額外的空間flex-grow財產。

如果設置為0,則在計算佈局時不會為該項目添加任何額外的空間。

如果您指定像素數字值,它將使用它作為長度值(寬度或高度取決於它是行還是列項目)

柔性

此屬性結合了以上3個屬性:

  • flex-grow
  • flex-shrink
  • flex-basis

並提供了一種簡寫語法:flex: 0 1 auto

免費下載我的CSS手冊


更多CSS教程: