Flex彈性盒子與容器屬性

Hanabri發表於2024-04-18
Flex

目錄
  • Flex彈性盒子與容器屬性
    • flex佈局
    • flex容器屬性
    • Flex 專案屬性

Flex彈性盒子與容器屬性

flex佈局

Flex 佈局（彈性盒子佈局）是一種用於在容器中進行佈局的模型，它使得容器的子元素能夠以彈性的方式排列，可以配合 rem 處理尺寸以適應不同螢幕尺寸和裝置。

Flex 佈局在前端開發中得到了廣泛的應用，因為它提供了一種相對簡單而強大的佈局方式。任何一個容器都可以指定為 Flex 佈局，符合響應式設計的特點。

.box {
    display: flex;
}

彈性盒子特點是可以控制下級盒子的位置,

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

採用 Flex 佈局的元素，稱為 Flex 容器（flex container）。它的所有子元素自動成為容器成員，稱為 Flex 專案（flex item），如下圖：

img

其中 flex 容器預設存在兩根軸：水平的主軸（main axis）和 垂直的交叉軸（cross axis）。

主軸的開始位置（與邊框的交叉點）叫做 main start，結束位置叫做 main end；

交叉軸的開始位置叫做 cross start，結束位置叫做 cross end。專案預設沿主軸排列。

單個專案佔據的主軸空間叫做 main size，佔據的交叉軸空間叫做 cross size。

flex 佈局主要是設定 flex 容器的對齊方式和 flex 專案的大小形態，上圖中的四個概念十分重要。

flex容器屬性

給容器設定 display: flex;後，可以為其新增以下 6 個容器屬性：

  • flex-direction；
  • flex-wrap；
  • flex-flow：flex-direction 屬性和 flex-wrap 屬性的簡寫形式；
  • justify-content；
  • align-items；
  • align-content。
  1. flex-direction：決定主軸的方向（即專案的排列方向）,
屬性值 作用
row（預設值） 主軸為水平方向，起點在左端（專案從左往右排列）
row-reverse 主軸為水平方向，起點在右端（專案從右往左排列）
column 主軸為垂直方向，起點在上沿（專案從上往下排列）
column-reverse 主軸為垂直方向，起點在下沿（專案從下往上排列）

2.flex-wrap：預設情況下，專案都排列在一條軸線上，如果一條軸線排不下的換行方式，

屬性值 作用
nowrap（預設） 不換行（列）
wrap 主軸為橫向時：從上到下換行；主軸為縱向時：從左到右換列
wrap-reverse 主軸為橫向時：從下到上換行；主軸為縱向時：從右到左換列

3.justify-content：定義了專案在主軸上的對齊方式，

屬性值 作用
flex-start（預設） 與主軸的起點對齊
flex-end 與主軸的終點對齊
center 與主軸的中點對齊
space-between 兩端對齊主軸的起點與終點，專案之間的間隔都相等
space-around 每個專案兩側的間隔相等。專案之間的間隔比專案與邊框的間隔大一倍

space-between與space-around最大的區別是,一個是與兩端對齊,一個是與兩端有間隔

4.align-items 屬性定義專案在交叉軸上如何對齊。

屬性值 作用
flex-start 交叉軸的起點對齊
flex-end 交叉軸的終點對齊
center 交叉軸的中點對齊
baseline 專案的第一行文字的基線對齊
stretch（預設值） 如果專案未設定高度或設為 auto，專案將佔滿整個容器的高度

5.align-content 屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。

屬性值 作用
flex-start 與交叉軸的起點對齊
flex-end 與交叉軸的終點對齊
center 與交叉軸的中點對齊
space-between 與交叉軸兩端對齊，軸線之間的間隔平均分佈
space-around 每根軸線兩側的間隔都相等，軸線之間的間隔比軸線與邊框的間隔大一倍
stretch（預設值） 主軸線佔滿整個交叉軸

Flex 專案屬性

上面所講的容器屬性都是用來設定專案的排列方式，而專案自身的大小和形態需要設定專案的屬性，以下 5 個屬性設定在專案上：

  • order
  • flex-grow
  • flex-shrink
  • flex
  • align-self
  1. order：預設情況下，專案的排列先後順序是按照 DOM 結構中出現的先後順序顯示的，而 order 屬性定義專案的排列順序。數值越小，排列越靠前，預設為 0，程式碼如下
.item {
    order: 1;
}

2.flex-grow 屬性定義專案的放大比例，預設為 0，即如果存在剩餘空間，也不放大，程式碼如下：

.item {
    flex-grow: 1; /* default 0 */
}

3.flex-shrink 屬性定義了專案的縮小比例，預設為 1，即如果空間不足，該專案將縮小，程式碼如下：

.item {
    flex-shrink: 3; /* default 1 */
}

4.flex 屬性是 flex-grow，flex-shrink 和 flex-basis 的簡寫，預設值為 0 1 auto（預設縮小但不放大）。後兩個屬性可選。程式碼如下：

.item {
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

5.align-self 屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋 align-items 屬性。預設值為 auto，表示繼承父元素的 align-items 屬性，如果沒有父元素，則等同於 stretch。

.item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

理解 flex 佈局，主要要理解容器和專案兩個概念，給容器設定屬性用來決定容器中的專案如何排列，如主軸方向、是否換行、主軸和交叉軸的對齊方式等，可以理解為宏觀的設定。而給專案設定屬性用來決定專案的大小形態順序，可以理解為微觀的設定

相關文章