Flexbox 不是全宽

Question

我有一个像这样的基本 flexbox ..

 .masonry_container {
  display: flex;
}

.masonry_left_col {
  border: 1px solid grey;
}

.masonry_right_col {
  border: 1px solid grey;
}

 <div class="masonry_container">

  <div class="masonry_left_col">
    Content
  </div>

  <div class="masonry_right_col">
    Content
  </div>

</div>

为什么它不延伸到全宽？

我知道这可能真的很简单，但我无法解决，我哪里出错了？

原文由 fightstarr20 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

容器实际上 是 100% 宽，即横跨窗口的整个宽度。但是使用默认的 flex 设置，它的孩子将简单地左对齐，并且只会和它们的内容一样宽。

但是，如果您将 flex-grow: 1; 应用于子元素以允许它们变宽，它们将拉伸并填充容器的整个宽度。

 .masonry_container {
  display: flex;
}

.masonry_left_col {
  border: 1px solid grey;
  flex-grow: 1;
}

.masonry_right_col {
  border: 1px solid grey;
  flex-grow: 1;
}

 <div class="masonry_container">

  <div class="masonry_left_col">
    Content
  </div>

  <div class="masonry_right_col">
    Content
  </div>

</div>

或者，如果您只想让弹性项目在容器内左右移动而不拉伸，请将 justify-content: space-between 添加到容器中

 .masonry_container {
  display: flex;
  justify-content: space-between;
}

.masonry_left_col {
  border: 1px solid grey;
}

.masonry_right_col {
  border: 1px solid grey;
}

 <div class="masonry_container">

  <div class="masonry_left_col">
    Content
  </div>

  <div class="masonry_right_col">
    Content
  </div>

</div>

原文由 Johannes 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

flex 容器确实扩展了整个宽度——它是一个块级元素。

 .masonry_container {
  display: flex;
  border: 1px solid red;
}

.masonry_container > div {
  border: 1px solid grey;
  background-color: lightgreen;
}

 <div class="masonry_container">
  <div class="masonry_left_col">Content</div>
  <div class="masonry_right_col">Content</div>
</div>

但是 flex 项目有两个默认设置可以防止自动扩展：

• flex-basis: auto
• flex-grow: 0

这意味着项目占用其内容的长度并且不占用可用空间。

对于要展开的项目，您需要覆盖 flex-grow 默认值。

 .masonry_container {
  display: flex;
  border: 1px solid red;
}

.masonry_container > div {
  flex-grow: 1;
  border: 1px solid grey;
  background-color: lightgreen;
}

 <div class="masonry_container">
  <div class="masonry_left_col">Content</div>
  <div class="masonry_right_col">Content</div>
</div>

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 4.0 许可协议