Flex 框列的宽度与 flex 不相等：1答案

【问题标题】：Flex box column not equal width with flex: 1Flex 框列的宽度与 flex 不相等：1
【发布时间】：2022-02-15 13:20:41
【问题描述】：

您好，我正在尝试使 flex 列的宽度相等，但它似乎不适用于 flex: 1。

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.17/tailwind.min.css" rel="stylesheet" />

<section class="flex flex-wrap w-full justify-center items-center content-center mt-20 lg:mt-0 min-h-85 fade fadeout">

  <div class="flex flex-col w-full md:w-1/3 max-w-md items-center bg-red-100">
    <div class="py-12 flex-1 bg-red-200">
      <h4 class="font-semibold tracking-widest text-xs">Box 1</h4>
      <p>Box 1 Flexbox 00000000</p>
    </div>
  </div>

  <div class="flex flex-col w-full md:w-1/3 max-w-md items-center bg-blue-100">
    <div class="py-12 flex-1 bg-blue-200">
      <h4 class="font-semibold tracking-widest text-xs">Box 2</h4>
      <p>Box 2 Flexbox 0</p>
    </div>
  </div>

  <div class="flex flex-col w-full md:w-1/3 max-w-md items-center bg-green-100">
    <div class="py-12 flex-1 bg-green-200">
      <h4 class="font-semibold tracking-widest text-xs">Box 3</h4>
      <p>Box 4 Flexbox 000</p>
    </div>
  </div>

</section>

我希望它是具有最宽内容的 flex col 的大小。

【问题讨论】：

标签： css flexbox tailwind-css

【解决方案1】：

flex: 1 不适用于弹性项目兄弟。

它适用于那些兄弟姐妹的孩子（即堂兄弟）。

因此，与flex: 1 的项目之间没有关联，也没有理由让它们的长度相等。

【讨论】：

如何让它们的宽度相等？
让他们成为兄弟姐妹或使用网格。
试图摆脱网格 - 你能给我一个例子来说明如何保持相同的布局并使它们成为兄弟吗？
您将不得不重组您的 HTML。去掉每个部分的二级 div。所以h4s 和ps 是顶级div 的孩子。然后他们都是兄弟姐妹，flex: 1 可以随心所欲地工作。

【解决方案2】：

这就是我的解决方案

如果一个元素具有 flex: 1 ，这意味着所有其他元素的大小将与其内容具有相同的宽度，但具有 flex: 1 的元素将拥有剩余的完整空间。

溶液

您可以使用grid grid-cols-{n} 将一行平均分配到n 列数中。我已经分享了下面的代码。

    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.17/tailwind.min.css" rel="stylesheet" />

    <section class="flex flex-wrap w-full justify-center items-center content-center mt-20 lg:mt-0 min-h-85 fade fadeout">

      <div class="grid grid-cols-3 w-full md:w-1/3 max-w-md items-center bg-red-100">
        <div class="bg-red-100"></div>
        <div class="py-12 flex-1 bg-red-200 text-center">
          <h4 class="font-semibold tracking-widest text-xs">Box 1</h4>
          <p>Box 1 Flexbox 00000000</p>
        </div>
        <div class="bg-red-100"></div>
      </div>

      <div class="grid grid-cols-3 w-full md:w-1/3 max-w-md items-center bg-blue-100">
      <div class="bg-blue-100"></div>
        <div class="py-12 flex-1 bg-blue-200 text-center">
          <h4 class="font-semibold tracking-widest text-xs">Box 2</h4>
          <p>Box 2 Flexbox 0</p>
        </div>
        <div class="bg-blue-100"></div>
      </div>

      <div class="grid grid-cols-3 w-full md:w-1/3 max-w-md items-center bg-green-100">
      <div class="bg-green-100"></div>
        <div class="py-12 flex-1 bg-green-200 text-center">
          <h4 class="font-semibold tracking-widest text-xs">Box 3</h4>
          <p>Box 4 Flexbox 000</p>
        </div>
        <div class="bg-green-100"></div>
      </div>

    </section>

有关更多信息，请参阅文档here

【讨论】：