具有 7 列的 Flexbox 网格

Question

我正在创建一个带有 tailwind 和 flexbox 的网格。是否可以创建 7 列网格？我知道我可以使用宽度百分比，但这里的最佳做法是什么？

Answer 1

实际上最好的解决方案是使用 CSS Grid 而不是 Flexboxes 来做到这一点。 Tailwind 默认支持最多 12 列的网格 (docs)。

<div class="grid grid-cols-7">
  <div class="col-span-1">1</div>
  <div class="col-span-3">2</div>
  <div class="col-span-3">3</div>
</div>

如果你真的需要使用flex:

默认有类、w-1/2、w-1/3、w-1/12等但没有w-1/7。我们可以在 style="" 或 CSS 中手动设置 div 的宽度，但最佳做法是扩展 Tailwind 配置。

我们需要添加 tailwind.config.js 新宽度类 (docs):

  module.exports = {
    theme: {
      extend: {
        width: {
+         '1/7': '14.2857143%',
+         '2/7': '28.5714286%',
+         '3/7': '42.8571429%',
+         '4/7': '57.1428571%',
+         '5/7': '71.4285714%',
+         '6/7': '85.7142857%',
        }
      }
    }
  }

现在我们可以使用 x/7 列：

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

如果你只想得到等宽的7列，那么我们根本不需要扩展配置和使用宽度类:

<div class="flex">
   <div class="flex-1">1</div>
   <!-- ... -->
   <div class="flex-1">7</div>
</div>

具有 7 列的 Flexbox 网格

Flexbox grid with 7 columns

flexboxgrid

tailwind-css

如果你真的需要使用flex: