點燈坊

失くすものさえない今が強くなるチャンスよ

如何水平均分 Column ?

Sam Xiao's Avatar 2021-04-15

在 Main Axis 水平均分 N 個 Column 為實務上常見需求，在 Tailwind CSS 有多種方式實現。

Version

Tailwind CSS 2.1.1

width

columns000

子層 item 水平三分父層 box 寬度，使用 w-1/3 從子層 item 下手。

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

第 2 行

<div class="flex">

設定父層 box style：

  • flex：設定子層 item 使用 Flexbox，主要為了使子層 item 能橫排

第 3 行

<div class="w-1/3">1</div>
<div class="w-1/3">2</div>
<div class="w-1/3">3</div>

設定子層 item style：

  • w-1/3：直覺會直接從 width 下手，可使用 w-1/3 設定

flex-grow

columns001

子層 item 水平三分父層 box 寬度，使用 flex-grow 從子層 item 下手。

<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，主要為了使子層 item 能橫排

第 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 皆相同，因此寬度比例相同而均分

flex-1

column003

子層 item 水平三分父層 box 寬度，使用 flex-1 從子層 item 下手。

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

第 3 行

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

設定子層 item style：

  • flex-1：設定子層 item 的 flex-grow 皆為 1，flex-shrink 皆為 0，flex-basis 皆為 0，也就是所有子層 item 寬度都是 0，只剩下父層 box 寬度，最後自動由 flex-grow 以 1 : 1 : ... 平分父層 box 寬度

grid-cols-

column003

子層 item 水平三分父層 box 寬度，使用 grid-cols- 從父層 box 下手。

<template>
  <div class="grid grid-cols-3">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</template>

第 2 行

<div class="grid grid-cols-3">

設定父層 box style：

  • grid：設定子層使用 Grid
  • grid-cols-3：設定子層自動分配寬度成三個 column

n 可設定 1 到 12

grid-flow-col

column002

子層 item 水平三分父層 box 寬度，使用 grid-flow-col 從父層 box 下手。

<template>
  <div class="grid grid-flow-col">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</template>

第 2 行

<div class="grid grid-flow-col">

設定父層 box style：

  • grid：設定子層 item 使用 grid
  • grid-flow-col：自動根據子層 item 個數水平均分 column

Conclusion

  • w-1/3 與 Flexbox 是從子層 item 下手，而 Grid 是從父層 box 下手
  • flex: 1 本質還是使用 flex-grow
  • Grid 的 grid-flow-col 會根據子層 item 個數自動水平均分，是最聰明方式

# TailwindCSS