Flexbox不是全宽

Question

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

＆＃13;

＆＃13;

.masonry_container {
  display: flex;
}

.masonry_left_col {
  border: 1px solid grey;
}

.masonry_right_col {
  border: 1px solid grey;
}

＆＃13;

<div class="masonry_container">

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

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

</div>

＆＃13;

＆＃13;

＆＃13;

为什么不扩展到全宽？

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

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项目有两个默认设置阻止自动扩展：

• 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

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

＆＃13;

＆＃13;

.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 */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;