點燈坊

學而時習之,不亦悅乎

CSS Flexbox 之使用 flex-basis 設定寬度

Sam Xiao's Avatar 2019-07-09

傳統會使用 widthheight 設定 Container 內 Item 寬度與高度,但 Flexbox 另外提出了 flex-basis,這與 widthheight 有什麼差異呢 ?

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>

CSS

style.css

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

.item0 {
  background: #faa;
}

.item1 {
  background: #afa;
}

.item2 {
  background: #aff;
}

第 1 行

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

displayflex,表示使用 flexbox。

第 6 行

.item0 {
  background: #faa;
}

注意並沒有對 container 內 item 設定 width。

Chrome

basis000

由於沒有對 item 設定 width,container 內 item 的 width 會自動隨內文調整。

But why ? 最後會解釋。

Width

basis001

1 寬度變寬。

.item0 {
  background: #faa;
  width: 200px;
}

因為 item0 明確指定 width200px,因此 item 不再根據 Red 內文寬度自動調整。

Flex-basis

basis002

1 寬度變窄。

.item0 {
  background: #faa;
  width: 200px;
  flex-basis: 150px;
}

同時設定 widthflex-basis,但 flex-basis 會取代 width,因此為 150px

Flex-basis: auto

basis003

1 寬度又變寬了。

.item0 {
  background: #faa;
  width: 200px;
  flex-basis: auto;
}

flex-basis 設定為 auto 時,browser 就會去找 width 決定寬度,事實上 flex-basis 不寫預設值就是 auto,所以由 width 決定寬度。

若連 width 也沒寫,就會由 內文 決定寬度,也就是一開始的狀況。

Flowchart

basis004

Flexbox 的寬度可由以上 flowchart 表示。

Conclusion

  • 假如 flex-direction 改成 column,則改判斷 height
  • 由於 flexbox 的寬度與高度牽涉到複雜的判斷,實務上建議使用 flex-basis 取代 widthheight

Reference

Garth Braithwaite, Defining dimensions on flexbox children using flex-basic
MDN, flex-basis