CSS/Tailwind：为什么 justify-between 将元素发送到底部而不是 content-between？答案

【问题标题】：CSS/Tailwind: Why does justify-between send element to bottom instead of content-between?CSS/Tailwind：为什么 justify-between 将元素发送到底部而不是 content-between？
【发布时间】：2022-01-11 04:23:22
【问题描述】：

社区，

我有一个简单的问题。我正在使用当前版本的 Tailwind CSS。

我的目标是将按钮 (corpus delicti) 发送到父 div 的底部。我一直在使用content-between，但这没有用。所以我只是为了好玩而尝试justify-between，并且按钮元素被发送到父 div 的底部。我不明白。 为什么会这样？

在 CSS 文档中声明“

...CSS justify-content 属性定义了浏览器如何沿主轴在内容项之间和周围分配空间一个弹性容器 [...]。”

这是 CSS 代码：

<div class="flex flex-col h-4/5 px-5 items-center justify-center space-x-0 md:flex-row md:space-x-24">


    <div id="parent-div" class="flex flex-col justify-between p-5 w-96 h-96 bg-red-400 ">

      <div class="flex flex-col">
        <h1 class="text-3xl font-bold">foo</h1>
        <p class="text-red-900">bar</p>
        <p class="text-red-900">hoo</p>
      </div>

      <div class="flex flex-row justify-end">
        <button class="w-32 flex flex-row justify-center bg-white rounded-lg shadow-xl">corpus delicti</button>
      </div>

    </div>
    
    <div class="w-96 h-96 bg-yellow-400 flex items-center justify-center md:justify-start">      
      <img class="object-contain" src="../static/pics/gif.gif">
    </div>


</div>

很高兴得到答案，因为这种行为完全破坏了我对 CSS 来之不易的信任。

提前谢谢！

【问题讨论】：

当你使用flex-col时你改变了你的主轴。因此，当更改为列时，您的主轴现在是垂直的而不是水平的。您的父 div 上有一个 flex-col。
就是这样，谢谢伙计！你拯救了我对 CSS 的信念。

标签： html css flexbox tailwind-css tailwind-ui

【解决方案1】：

在#parent-div 上去掉flex-col 并在您的按钮上使用h-fit (height: fit-content;)。

见here

<div class="flex flex-col h-4/5 px-5 items-center justify-center space-x-0 md:flex-row md:space-x-24">


  <div id="parent-div" class="flex justify-between p-5 w-96 h-96 bg-red-400 ">

    <div class="flex flex-col">
      <h1 class="text-3xl font-bold">foo</h1>
      <p class="text-red-900">bar</p>
      <p class="text-red-900">hoo</p>
    </div>

    <div class="flex justify-end">
      <button class="w-32 flex h-fit flex-row justify-center bg-white rounded-lg shadow-xl">corpus delicti</button>
    </div>

  </div>

  <div class="w-96 h-96 bg-yellow-400 flex items-center justify-center md:justify-start">
    <img class="object-contain" src="../static/pics/gif.gif">
  </div>


</div>

【讨论】：