以不同宽度呈现的行中的 Flex 项目答案

【问题标题】：Flex items in a row rendering at different widths以不同宽度呈现的行中的 Flex 项目
【发布时间】：2018-02-22 18:14:20
【问题描述】：

我在 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>

【问题讨论】：

标签： html css google-chrome flexbox

【解决方案1】：

这是问题的根源：

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

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

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

revised codepen

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

非常好的@Spartacus。谢谢你的解释。