Question

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

左对齐的图片（粉红色），具有下一个元素的高度
右上角对齐的文本块（红色）。它由两个堆叠的元素组成：一个文本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网格解决此问题，但我想知道为什么它不起作用。

问题：如何使justify-content: space-between生效？

Answer 1

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

然后，黑客将display: -moz-box;添加到.header CSS定义中。但是，这很奇怪，因为“ Flexbox在主流浏览器中不再需要前缀属性值（例如-moz-box）。” （请参阅Michael_B's comment）。 因此，我们希望您能发现一些骇人听闻的解决方案。

完整代码：

<!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>

Answer 2

请尝试以下代码

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

如何使flexbox的“合理内容：间隔”有效？

2 个答案: