使用 flex-grow 分配子層 Item 寬度 | 點燈坊

若要子層 Item 寬度依照比例分配，直覺會從 width 下手，事實上也可以使用 flex-grow 實現。

Version

CSS 3

Same Grow

Item1、Item2 與 Item3 依照等比例三分父層 box 寬度。

<template>
  <div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</template>

<style scoped>
.box {
  display: flex;
}

.item {
  flex-grow: 1;
}
</style>

10 行

.box {
  display: flex;
}

設定父層 box style：

• display: flex：設定子層 item 使用 Flexbox

14 行

.item {
  flex-grow: 1;
}

設定子層 item style：

• flex-grow: 1：item1、item2 與 item3 的 flex-grow 皆相同，因此寬度比例相同而均分

Different Grow

Item1、item2 與 item3 寬度依 1：2：3 分配。

<template>
  <div class="box">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
  </div>
</template>

<style scoped>
.box {
  display: flex;
}

.item1 {
  flex-grow: 1;
}

.item2 {
  flex-grow: 2;
}

.item3 {
  flex-grow: 3;
}
</style>

14 行

.item1 {
  flex-grow: 1;
}

.item2 {
  flex-grow: 2;
}

.item3 {
  flex-grow: 3;
}

直接在各子層 item 的 flex-grow 指定比例即可。

Conclusion

• 若想各子層 item 依照比例分配寬度，可簡單使用 flex-grow 指定比例即可

Reference

MDN, flex-grow