Flexbox 不是全宽

Question

我有一个像这样的基本弹性盒..

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

为什么它没有延伸到整个宽度？

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

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>

或者，如果您只想让 flex 项目在容器内完全左右移动而不拉伸，请将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>

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

Answer 3

您可以指定您希望您的 flex 孩子grow的范围。 如果您希望每个项目共享相同的宽度，只需为两个孩子设置flex-grow: 1即可。

 .masonry_container { display:flex; } .masonry_left_col { border:1px solid grey; flex-grow: 1; /* 33% width relative to right column */ } .masonry_right_col { border:1px solid grey; flex-grow: 2; /* 66% width relative to left column */ }

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

Answer 4

另请查看容器

这应该是容器流体（因此 flex 容器的父级将跨越 100%）