html - 以不同宽度呈现的一行中的 Flex 元素

Question

我在 html 中使用 css flexbox 创建了 3 个盒子，但 Chrome 正在渲染不同尺寸的盒子。

拖动浏览器的边框使 View 变小。

感谢您的帮助!

代码笔: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%，这将调整 flex box 的宽度，并根据您添加的任意数量的元素进行调整(以防您要添加超过 3 个)。

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

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