點燈坊

學而時習之,不亦悅乎

CSS Flexbox 之使用 flex 一次設定 flex-grow、flex-shrink 與 flex-basis

Sam Xiao's Avatar 2019-07-10

雖然 flex-growflex-shrinkflex-basis 為 3 個獨立 property,但實務上常使用 flex 一次設定。

Version

macOS Mojave 10.14.5
WebStorm 2019.1.3
Chrome 75.0.3770.100
CSS 3

HTML

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flexbox</title>
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="box">
    <h1 class="item0">1</h1>
    <h1 class="item1">2</h1>
    <h1 class="item2">3</h1>
  </div>
</body>
</html>

<div> 下有 3 個 <h1>

flex: 1

flex000

3 個 item 平分 container。

style.css

.box {
  display: flex;
  background: #d3d3d3;
}

h1 {
  flex: 1;
}

.item0 {
  background: #faa;
}

.item1 {
  background: #afa;
}

.item2 {
  background: #aff;
}

第 6 行

h1 {
  flex: 1;
}

flex 只設定一個值且沒有任何單位,這相當於:

h1 {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

flex-basis 預設值為 auto,也就是由 width 決定,但 flex: 1 會強制將 flex-basis 設定為 0,也就是所有 item 寬度都是 0,會自動由 flex-grow1 : 1 : … 瓜分 container 剩餘寬度,相當於平分 container。

若想平分 container 又不想手動設定 flex-basis,設定 flex: 1 是最簡單方式,實務上經常使用

flex: 100px

flex001

第一個 item 瓜分 container 剩餘寬度。

.item0 {
  flex: 100px;
}

flex 只設定一個值而有單位,這相當於:

.item0 {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 100px;
}

所以 100px 主要是設定 flex-basis,而 flex-growflex-shrink 都設定為 1

也因為 flex-grow 設定為 1,其他 item 的 flex-grow0,因此第一個 item 瓜分 container 剩餘寬度。

flex: 0 100px

flex002

第一個 item 寬度為 100px,且沒瓜分 container 剩餘寬度。

.item0 {
  flex: 0 100px;
}

flex 只設定兩個值,一個沒單位,一個有單位,這相當於:

.item0 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 100px;
}

沒有單位的值是設定 flex-grow,有單位的值是設定 flex-basis

flex: 0 3 400px

flex003

第一個 item 明顯縮減寬度較多。

.box {
  display: flex;
  background: #d3d3d3;
  width: 900px;
}

.item0 {
  background: #faa;
  flex: 0 3 400px;
}

.item1 {
  background: #afa;
  flex-basis: 400px;
}

.item2 {
  background: #aff;
  flex-basis: 400px;
}

第 7行

.item0 {
  flex: 0 3 400px;
}

flex 三個值都設定,前兩個值沒單位,最後值有單位,這相當於:

.item0 {
  flex-grow: 0;
  flex-shrink: 3;
  flex-basis: 400px;
}

也因為 flex-shrink3,所以縮減比例為 3 : 1 : 1,因此第一個 item 縮減特別明顯。

Conclusion

  • 實務上會常用 flex 一次設定,在 Chrome developer tools 看到的也是 flex

Reference

Garth Braithwaite, Combining the flexbox sizing properties using the flex shorthand
MDN, flex