以不同宽度渲染的行中的Flex项目

Question

我在html中使用css flexbox创建了3个框，但Chrome正在渲染不同大小的框。

拖动浏览器的边框以缩小视图。

感谢您的帮助！

Codepen：https://codepen.io/labanino/pen/rGaNLP

body {
  font-family: Arial;
  font-size: 2rem;
  text-transform: uppercase;
}

.flex {
  height: 200px;
  display: flex;
  flex-direction: row;
}

.flex>section {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.flex>section:nth-child(1) {
  background: brown;
  margin-right: 20px;
  border: 1px solid #999;
}

.flex>section:nth-child(2) {
  background: pink;
  margin-right: 20px;
  border: 1px solid #999;
}

.flex>section:nth-child(3) {
  background: green;
  margin-right: 0;
  border: 1px solid #999;
}

<div class="flex">
  <section>Brown</section>
  <section>Pink</section>
  <section>Green</section>
</div>

Answer 1

请勿在flex属性中使用auto作为项目。使用100％，这将调整弹性框中的宽度，并调整为您添加的任意数量的元素（如果您想要添加超过3个）。

.flex > section {
  flex: 1 1 100%;  
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

它们的大小不同的原因是因为当您使用auto时，它的宽度基于框的内容。这就是为什么中间的那个不那么宽，因为“粉红色”这个词占用的空间比“绿色”要少。

Answer 2

以下是问题的根源：

.flex > section { flex: 1 1 auto }

这分解为：

• flex-grow: 1
• flex-shrink: 1
• flex-basis: auto

使用flex-basis: auto，您将根据内容的长度调整项目大小。因此，更广泛的内容将创造更广泛的项目。

如果您想要对行中的所有项目使用相同的大小，请使用：

• flex-basis: 0和
• min-width: 0 / overflow: hidden

使用flex-basis: 0，您可以为每个项目分配容器中相等的空间分布。更多详细信息： Make flex-grow expand items based on their original size

使用min-width: 0或overflow: hidden您可以让商品缩小其内容，因此在较小的屏幕上可以保持相同的尺寸。更多详细信息： Why doesn't flex item shrink past content size?

＆＃13;

＆＃13;

.flex {
  display: flex;
  height: 200px;
}
.flex>section {
  flex: 1;          /* new; same as flex: 1 1 0 */
  overflow: hidden; /* new */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* non-essential demo styles */
.flex>section:nth-child(1) {
  background: brown;
  margin-right: 20px;
  border: 1px solid #999;
}
.flex>section:nth-child(2) {
  background: pink;
  margin-right: 20px;
  border: 1px solid #999;
}
.flex>section:nth-child(3) {
  background: green;
  margin-right: 0;
  border: 1px solid #999;
}
body {
  font-family: Arial;
  font-size: 2rem;
  text-transform: uppercase;
}

＆＃13;

<div class="flex">
  <section>Brown</section>
  <section>Pink</section>
  <section>Green</section>
</div>

＆＃13;

＆＃13;

＆＃13;

revised codepen