时间戳

首页 > 解决方案 > 具有 7 列的 Flexbox 网格

tailwind-css - 具有 7 列的 Flexbox 网格

问题描述

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

标签： tailwind-cssflexboxgrid

解决方案

实际上最好的解决方案是使用 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>

推荐阅读