垂直填充父 flex-box 容器，每个容器高度为 33%

Posted 2023-03-07

【中文标题】垂直填充父 flex-box 容器，每个容器高度为 33%

【英文标题】：Vertically fill a parent flex-box container with 3 items each at 33% of height

【发布时间】：2021-09-18 22:48:06

【问题描述】：

我目前使用 Tailwind 的情况（请参阅 this playground）

<div class="h-screen flex flex-col items-center space-y-6">
  <div class="h-1/3">X</div>
  <div class="h-1/3">X</div>
  <div class="h-1/3">X</div>
</div>

我喜欢的是这 3 个项目中的每一个都占用了 h-screen 容器的 33%（减去 y 间距）。

发生的情况是h-screen 容器大于屏幕的高度，所以有一个滚动，你可以在我添加的操场上看到。

在该容器周围有一个带有py-6 的父级。我最初认为这是问题所在，但如果我这样做：

<div class="h-screen flex flex-col items-center space-y-6">
  <div class="">X</div>
</div>

在它周围有相同的py-6 父级，它按预期工作并且没有滚动。

【问题讨论】：

您是否需要三个元素具有相同的高度，而您的应用程序没有滚动，无论父级的填充是什么？ play.tailwindcss.com/CASV8MyTuh

【参考方案1】：

您可以使用flex-1等其他类来扩展您的flex-child和mind margins，同样flex-col对持有一个孩子的父母来说是不必要的，h-screen对孩子也是没有必要的， parent 已经是一个调整大小的 flexbox 并且会填满它：

可能的例子：

<div class="min-h-screen bg-gray-100 py-6 flex  justify-center">
  <div class=" flex flex-col items-center space-y-6">
    <div class="flex-1 bg-red-500">X</div>
    <div class="flex-1 bg-green-500">X</div>
    <div class="flex-1 bg-yellow-500">X</div>
  </div>
</div>

https://play.tailwindcss.com/VCTmCjUAQA

使它成为 2 个孩子，它将是 50% 减去边距，四个：25% 减去边距，依此类推。 flex 自己做数学;)