具有 7 列的 Flexbox 网格答案

【问题标题】：Flexbox grid with 7 columns具有 7 列的 Flexbox 网格
【发布时间】：2021-01-09 13:14:29
【问题描述】：

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

【问题讨论】：

【解决方案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>

【讨论】：