CSS 中的 Flex 佈局 完全指南

wopen發表於2019-04-06
CSSFlex

Flex 彈性盒子佈局是很強大的佈局，它可以很方便的控制元素在垂直和水平方向上的行為。

要使用 Flex，首選需要一個 Flex 容器（flex container）。使用display: flex;建立，flex 是一個 CSS 的display屬性中新新增一個值，而容器下的每個子元素將成為 flex item（伸縮專案）。伸縮專案將參與到 flex 佈局中，所有由 CSS Flexible Box Layout Module（CSS伸縮盒佈局模型）定義的屬性都能被它們使用。

設為 Flex 佈局以後，子元素的float、clear和vertical-align屬性將失效。

主軸和交叉軸

容器存在兩個軸，水平叫主軸（Main-Axis），垂直叫交叉軸（Cross-Axis）。主軸左邊是開始位置（main start）右邊是結束位置（main end），交叉軸上是開始位置（cross start）下是結束位置（cross end）。我們用 justify 屬性控制主軸專案的空隙，使用 align 屬性控制交叉軸專案之間的垂直行為。

容器的屬性

容器一共有 6 個屬性：

  1. flex-direction
  2. flex-wrap
  3. flex-flow
  4. justify-content
  5. align-items
  6. align-content

flex-direction

flex-direction 屬性決定主軸的方向。一共有 4 個值row | row-reverse | column | column-reverse，初始值是row。交叉軸是垂直於主軸的，如果它值為column那麼交叉軸就是水平方向。

CSS 中的 Flex 佈局 完全指南

  • row 是預設
  • row-reverse 將起點變為右邊
  • column 主軸為垂直方向，起點在上面
  • column-reverse 主軸為垂直方向，起點在下面

flex-wrap

指定 flex 元素單行顯示還是多行顯示 。如果允許換行，這個屬性允許你控制行的堆疊方向。它一共有 3 個值nowrap | wrap | wrap-reverse，起始值是nowrap。

  • nowrapflex 的元素被擺放到到一行，這可能導致溢位 flex 容器
  • wrapflex 元素 被打斷到多個行中
    CSS 中的 Flex 佈局 完全指南
  • wrap-reverse和wrap的行為一樣，但是cross-start和cross-end互換。

CSS 中的 Flex 佈局 完全指南

flex-flow

flex-direction和flex-wrap的簡寫。預設是flex-flow: row nowrap;

justify-content

定義了瀏覽器如何分配順著父容器主軸的彈性元素之間及其周圍的空間。它有很多屬性，但是其中有很多是不常用。

常用的 7 個屬性：

  • space-between在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個元素與行首對齊，每行最後一個元素與行尾對齊
  • space-around和space-between類似，但是每行第一個元素到行首的距離和每行最後一個元素到行尾的距離將會是相鄰元素之間距離的一半
  • space-evenly和space-around類似，但是相鄰flex項之間的間距，主軸起始位置到第一個flex項的間距，主軸結束位置到最後一個flex項的間距，都完全一樣
  • stretchflex 子項的寬度和大於容器，則各個子項根據自己的大小縮放來撐滿容器，如果子項和的最小寬度大於容器，則會撐開容器，如果和小於容器則相當於flex-start
  • flex-start從行首開始排列。每行第一個彈性元素與行首對齊，同時所有後續的彈性元素與前一個對齊
  • flex-end從行尾開始排列。每行最後一個彈性元素與行尾對齊，其他元素將與後一個對齊
  • center伸縮元素向每行中點排列。每行第一個元素到行首的距離將與每行最後一個元素到行尾的距離相同

CSS 中的 Flex 佈局 完全指南

如果它和flex-direction: column;結合，則會這樣：

CSS 中的 Flex 佈局 完全指南

align-items

定義專案在交叉軸上如何對齊。

它一共有 5 個常用屬性。

  • flex-start
  • flex-end
  • center
  • stretch
  • baseline

CSS 中的 Flex 佈局 完全指南

align-content

定義了多根軸線（多行）的對齊方式。該屬性對單行彈性盒子模型無效。（即：帶有flex-wrap: nowrap）。

一共有 6 個常用屬性：

  • flex-start與交叉軸的起點對齊
    CSS 中的 Flex 佈局 完全指南
  • flex-end與交叉軸的終點對齊
    CSS 中的 Flex 佈局 完全指南
  • center與交叉軸的中點對齊
    CSS 中的 Flex 佈局 完全指南
  • space-between與交叉軸兩端對齊，軸線之間的間隔平均分佈
    CSS 中的 Flex 佈局 完全指南
  • space-around每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍
    CSS 中的 Flex 佈局 完全指南
  • stretch拉伸所有行來填滿剩餘空間。剩餘空間平均的分配給每一行（預設值）
    CSS 中的 Flex 佈局 完全指南

flex item 的屬性

flex 項一共有 6 個屬性：

  1. flex-basis
  2. flex-grow
  3. flex-shrink
  4. flex
  5. order
  6. align-self

flex-basis

flex-basis和min-width相似，指定了 flex 元素在主軸方向上的初始大小。（如果不使用 box-sizing 來改變盒模型的話，那麼這個屬性就決定了 flex 元素的內容盒（content-box）的寬或者高的大小。）根據內部內容擴充套件專案的大小。如果不是，將使用預設基準值。

CSS 中的 Flex 佈局 完全指南

flex-grow

定義彈性盒子項（flex item）的拉伸因子，將相對於同一行上所有其他專案的大小總和進行縮放，這些專案將根據指定的值自動調整。它的值是number，負數無效。

CSS 中的 Flex 佈局 完全指南

flex-shrink

指定了 flex 元素的收縮規則。flex 元素僅在預設寬度之和大於容器的時候才會發生收縮，其收縮的大小是依據 flex-shrink 的值。

flex

它是flex-grow, flex-shrink和flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。

order

用來重新排列專案的自然順序。元素按照order屬性的值的增序進行佈局。擁有相同order 屬性值的元素按照它們在原始碼中出現的順序進行佈局。

CSS 中的 Flex 佈局 完全指南

align-self

會對齊當前 flex 行中的 flex 元素，並覆蓋align-items的值. 如果任何 flex 元素的側軸方向margin值設定為auto，則會忽略align-self。

CSS 中的 Flex 佈局 完全指南

相關文章