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