Flexbox 不是全宽答案

【问题标题】：Flexbox not full widthFlexbox 不是全宽
【发布时间】：2021-08-23 04:24:07
【问题描述】：

我有一个像这样的基本 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>

为什么没有延伸到全宽？

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

【问题讨论】：

.masonry_container > div {flex: 1}

标签： html css flexbox

【解决方案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>

【讨论】：

【解决方案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-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>

【讨论】：

【解决方案3】：

您可以指定您希望将子级伸缩到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>

【讨论】：