Flex布局的詳細總結

• 2021 年 12 月 25 日
• 筆記
• CSS, CSS相關, HTML

Flex布局的詳細總結

1.認識flex布局

flex布局（flexible布局，彈性布局），是目前web開發中使用的最多的布局方案。

• 兩個重要概念：
  • 開啟flex布局的元素叫flex container；
  • flex container裡面的直接子元素叫做flex items；
• 設置display屬性為flex或者inline-flex可以成為flex container：
  • flex：使得flex container以塊級形式存在；
  • inline-flex：使得flex container以行內級形式存在；

2.flex布局模型

當元素開啟flex布局時，會沿著兩個軸來進行布局。

• 主軸（main axis）：沿著flex元素放置的方向延伸的軸；
• 交叉軸（cross axis）：垂直於flex元素放置方向的軸；
• main start和main end：分別為主軸的開始位置和結束位置；
• cross start和cross end：分別為交叉軸的開始位置和結束位置；
• main size和cross size：分別為主軸的大小和交叉軸的大小；

3.flex相關的屬性

4.flex container

4.1.flex-direction

• flex items默認都是沿著main axis（主軸）從main start往main end方向進行排布；

• flex-direction決定了main axis的方向，有以下四個取值：

  • row（默認值）
  • row-reverse
  • column
  • column-reverse

  

4.2.justify-content

justify-content決定了flex items在main axis上的對齊方式，有以下取值：

• flex-start：默認值，與main start對齊；
• flex-end：與main end對齊；
• center：居中對齊；

• space-between：flex items之間的距離相等，與main start、main end兩端對齊；
• space-evenly：flex items之間的距離相等，與main start、main end之間的距離等於flex items之間的距離；
• space-around：flex items之間的距離相等，與main start、main end之間的距離是flex items之間距離的一半；

4.3.align-items

align-items決定了flex items在cross axis上的對其方式，有以下取值：

• normal：在彈性布局中，效果和stretch一樣；

• stretch：當flex items在cross axis方向的size為auto時，會自動拉伸至填充flex container；

  

• flex-start：與cross start對齊；

• flex-end：與cross end對齊；

• center：居中對齊；

• baseline：與基準線對齊；

4.4.flex-wrap

flex-wrap決定了flex container是單行還是多行，有以下取值：

• nowrap：默認值，單行；
• wrap：多行；
• wrap-reverse：多行（對比wrap，cross start和cross end相反）；

4.5.flex-flow

• flex-flow是flex-direction | flex-wrap的簡寫；
• 可以省略，順序任意；

4.6.align-content

align-content決定了多行flex items在cross axis上的對齊方式，用法與justify-content類似，有以下取值：

• stretch：默認值；
• flex-start：與cross start對齊；
• flex-end：與cross end對齊；
• center：居中對齊；

• space-between：flex items之間的距離相等，與cross start、cross end兩端對齊；
• space-around：flex items之間的距離相等，與cross start、cross end之間的距離是flex items之間距離的一半；
• space-evenly：flex items之間的距離相等，與cross start、cross end之間的距離等於flex items之間的距離；

5.flex items

5.1.order

order決定了flex items的排布順序。

• 可以設置任意整數（正整數、負整數、0），值越小就越排在前面；
• 默認值是0；

5.2.align-self

flex items可以通過align-self覆蓋flex container設置的align-items屬性。

• auto：默認值，使用flex container設置的align-items屬性；
• stretch、flex-start、flex-end、center、baseline屬性值效果跟align-items一致；
• 如果想單獨某些items在cross axis上的對齊方式，就可以單獨給某個flex item設置align-self；

5.3.flex-grow

• flex-grow決定了flex items如何擴展；
  • 可以設置任意非負數字（正小數、正整數、0），默認值為0；
  • 當flex container在main axis方向上有剩餘的空間時，flex-grow屬性才會生效；
• 如果所有flex items的flex-grow總和超過1，每個flex item擴展的size為：flex container剩餘size * 當前flex item的flex-grow值 / sum；
• 如果所有flex items的flex-grow總和不超過1，每個flex item擴展的size為：flex container剩餘size * 當前flex item的flex-grow值；
• 注意：flex itmes擴展後的最終size不能超過max-widht、max-height；

示例程式碼：

.box {
  display: flex;
  flex-wrap: wrap;
  width: 500px;
  height: 400px;
  background-color: skyblue;
  color: #fff;
}

.inner {
  width: 100px;
  height: 100px;
}

.inner1 {
  background-color: #f00;
  flex-grow: 0.1;
}

.inner2 {
  background-color: #0f0;
  flex-grow: 0.1;
}

.inner3 {
  background-color: #00f;
  flex-grow: 0.1;
}

.inner4 {
  background-color: #f0f;
  flex-grow: 0.1;
}

<div class="box">
  <div class="inner inner1">inner1</div>
  <div class="inner inner2">inner2</div>
  <div class="inner inner3">inner3</div>
  <div class="inner inner4">inner4</div>
</div>

運行結果：

• 如果給每個inner設置flex-grow: 0.1;，在剩餘的100px空間中，每個盒子各分100px * 0.1 = 10px的size；

  

• 如果給每個inner設置flex-grow: 1;，在剩餘的100px中，每個盒子各分100px * 1 / 4 = 25px；

  

5.4.flex-shrink

• flex-shrink決定了flex items如何收縮；
  • 可以設置任意非負數字（正小數、正整數、0），默認值是1；
  • 當flex items在mian axis方向上超過了flex container的size，flex-shrink屬性才會有效；
• 如果所有flex items的flex-shrink總和sum超過1，每個flex item收縮size為：flex items超出flex container的size * 當前flex item的flex-shrink值 / sum；
• 如果所有的flex items的flex-shrink總和sum不超過1，每個flex item收縮size為：flex items超出flex container的size * sum * 收縮比例 / 所有flex items的收縮比例之和；
  • 收縮比例 = 當前item的flex-shrink * flex item的base size，base size就是flex item放入flex container之前的size；
• flex items收縮後的最終size不能小於min-width、min-height；

示例程式碼：設置flex container的大小為300px，每個flex items的大小為100px，一共4個超過了flex container的100px。

.box {
  display: flex;
  width: 300px;
  height: 400px;
  background-color: skyblue;
  color: #fff;
}

.inner {
  width: 100px;
  height: 100px;
}

.inner1 {
  background-color: #f00;
  flex-shrink: 1;
}

.inner2 {
  background-color: #0f0;
  flex-shrink: 1;
}

.inner3 {
  background-color: #00f;
  flex-shrink: 1;
}

.inner4 {
  background-color: #f0f;
  flex-shrink: 1;
}

<div class="box">
  <div class="inner inner1">inner1</div>
  <div class="inner inner2">inner2</div>
  <div class="inner inner3">inner3</div>
  <div class="inner inner4">inner4</div>
</div>

運行結果：

• 當設置flex-shrink: 1，或者不設置（默認值為1），每個flex item的大小收縮：100px * 1 / 4 = 25px，最終大小為100px - 25px = 75px；

  

• 當設置flex-shrink: 0.1;，每個flex item的大小收縮：100px * 0.4 * 100px * 0.1 / 40px = 10px，最終大小為100px - 10px = 90px

  

5.5.flex-basis

flex-basis用來設置flex items在main axis方向上的base size。

• auto：默認值；
• 設置具體的寬度數值：會覆蓋之前給flex items設置的width；

決定flex items最終base size的因素，優先順序高到低排列如下：

• max-width\max-height\min-width\min-height；
• flex-basis；
• width\height；
• 內容本身的size；

5.6.flex

flex是flex-grow | flex-shrink | flex-basis的簡寫屬性，可以指定1、2或3個值。

• 指定1個值：
  • 一個無單位數：會被當做flex-grow的值；
  • 一個有效的寬度值：會被當做flex-basis的值；
  • 關鍵字none、auto或initial；
• 指定2個值：
  • 第一個值必須為一個無單位數，並且作為flex-grow的值；
  • 第二個值必須為以下之一：
    • 一個無單位數：會被當做flex-shrink的值；
    • 一個有效的寬度值：會被當做flex-basis的值；
• 指定3個值：
  • 第一個值必須為無單位數：會被當做flex-grow的值；
  • 第二個值必須為無單位數：會被當做flex-shrink的值；
  • 第三個值必須為有效寬度值：會被當做flex-basis的值；