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

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

Version

Tailwind CSS 2.0.3

Same Grow

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

<template>
  <div class="flex">
    <div class="flex-grow">1</div>
    <div class="flex-grow">2</div>
    <div class="flex-grow">3</div>
  </div>
</template>

第 2 行

<div class="flex">

設定父層 box style：

• flex：設定子層 item 使用 Flexbox

第 3 行

<div class="flex-grow">1</div>
<div class="flex-grow">2</div>
<div class="flex-grow">3</div>

設定子層 item1 特定 style：

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

Different Grow

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

<template>
  <div class="flex">
    <div class="flex-grow">1</div>
    <div class="flex-grow-2">2</div>
    <div class="flex-grow-3">3</div>
  </div>
</template>

第 3 行

<div class="flex-grow">1</div>
<div class="flex-grow-2">2</div>
<div class="flex-grow-3">3</div>

除了使用 flex-grow 外，還使用了自行擴充的 flex-grow-2 與 flex-grow-3。

tailwind.config.js

module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false,
  theme: {
    flexGrow: {
      DEFAULT: 1,
      '2': 2,
      '3': 3
    }
  },
  variants: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
  ]
}

第 4 行

theme: {
  flexGrow: {
    DEFAULT: 1,
    '2': 2,
    '3': 3
  }
},

若要自行擴充 flex-grow-2、flex-grow-3 ….，需自行在 tailwind.config.js 的 theme 增加 flexGrow，除了定義 DEFAULT 外，還定義要新增的 flex-grow 值。

Conclusion

• 若想各子層 item 依照比例分配寬度，可簡單使用 flex-grow 指定比例即可
• Tailwind 預設只支援 flex-grow: 0 與 flex-grow: 1，若要使用其他 flex-grow 值，要自行在 tailwind.config.js 設定

Reference

Tailwind CSS, Flex Grow