Flexbox不是全宽 [英] Flexbox not full width

问题描述

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

I have a basic flexbox like this..

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

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

Why does it not extend to the full width?

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

I know this is probably really simple but i can't work it out, where am I going wrong?

推荐答案

容器实际上 的宽度为100％，即跨过窗口的整个宽度.但是使用默认的flex设置，它的子代将简单地向左对齐，并且仅与它们的内容一样宽.

The container actually is 100% wide, i.e. spans the full width of the window. But with the default flex settings, its children will simply align left and will be only as wide as their contents.

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

However, if you apply flex-grow: 1; to the child elements to allow them to get wider, they will stretch and fill the full width of the container.

.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

Or, if you just want the flex items to go full left and right inside the container without stretching, add justify-items: space-between to the container

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

这篇关于Flexbox不是全宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！