如何使 flexbox 'justify-content: space-between' 生效？答案

【问题标题】：How to make flexbox 'justify-content: space-between' have effect?如何使 flexbox 'justify-content: space-between' 生效？
【发布时间】：2018-10-16 21:53:20
【问题描述】：

我想创建以下布局，其中标题（绿色）跨越屏幕的整个宽度并由两个元素组成：

一张图片（粉红色），左上对齐，具有下一个元素的高度
一个文本块（红色），右上对齐。它由两个堆叠的元素组成：一个文本 div（黄色）和一个按钮。宽度按钮等于文本宽度。

预期的输出是这样的：

我的代码如下：

          .header{
            background-color: green; 
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
          }
          .flex-element{
            display: inline-block;
          }
          .picture_container{
            background-color: pink
          }
          .picture{
            height: 100%;
          }
          .text_container{
            background-color: red
          }
          .text{
            background-color: yellow;
          }

        <div class="header">
          <div class="flex-element picture_container">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/Tux_Enhanced.svg/154px-Tux_Enhanced.svg.png" alt="" class="picture">
          </div>
          <div class="flex-element text_container">
            <div class="text">
              AAAAAAAAAA <br>
              BBB
            </div>
            <button type="button" name="button" style="width: 100%">foo</button>
          </div>
        </div>

并给出以下输出：

问题是粉红色块和红色块之间没有“空格”，并且它们不是顶部对齐的。我知道我可以使用 css grid 解决它，但我想知道它为什么不起作用。

问题：如何让justify-content: space-between有效果？

【问题讨论】：

您使用的是哪个浏览器？在 Chrome 中尝试了您的代码，它工作正常。
@Goombah Firefox 开发版 63.0b14（64 位）
@scraaappy：感谢您创建 sn-p。我可以在那里看到代码正在运行。
@Goombah：你让我解决了问题：在.header{…} 中添加display: -moz-box; 解决了问题。
我认为你想要一个 margin-left: auto 在你的 flexbox 的右边元素上

标签： html css flexbox

【解决方案1】：

这可能是一个浏览器问题。事实上，我正在使用 Firefox Developer Edition 63.0b14 作为浏览器。

然后在.header css 定义中添加display: -moz-box;。不过，这很奇怪，因为 “flexbox 在主流浏览器中不再需要前缀属性值（例如 -moz-box）。”（参见 Michael_B's comment）。 因此，我们仍会赞赏一个不那么 hacky 的解决方案。

完整代码：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <style media="screen">
      .header{
        background-color: green; 
        display: -moz-box;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
      }
      .flex-element{
        display: inline-block;
      }
      .picture_container{
        background-color: pink
      }
      .picture{
        height: 100%;
      }
      .text_container{
        background-color: red
      }
      .text{
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div class="header">
      <div class="flex-element picture_container">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/Tux_Enhanced.svg/154px-Tux_Enhanced.svg.png" alt="" class="picture">
      </div>
      <div class="flex-element text_container">
        <div class="text">
          AAAAAAAAAA <br>
          BBB
        </div>
        <button type="button" name="button" style="width: 100%">foo</button>
      </div>
    </div>
  </body>
</html>

【讨论】：

在主流浏览器中不再需要带前缀的属性值（例如-moz-box）。无论您的代码无法正常工作的原因是什么，添加display: -moz-box 只是一种在这种情况下发生的黑客行为。这不是一个可靠的解决方案。换句话说，您面临的根本问题没有得到解决。
@Michael_B 确实，令我震惊的是，我不得不在 2018 年使用最新的浏览器使用前缀（也许这就是我自己没有想到解决方案的原因）。如果你有任何建议，我欢迎。感谢您强调它不应该是必需的。
我没有提到任何替代解决方案，因为我在 FF 中测试了您的代码并且无法重现该问题。我让它呈现与 Chrome 中相同的效果。

【解决方案2】：

请尝试以下代码

<style>
.header {
  padding: 10px;
}
.picture {
  width: auto;
}
.text_container {
  margin: auto 0;
}
.picture_container {
  display: block;
}
</style>

【讨论】：