Html 迭代三列flexbox

我在react中有一个组件，在循环中迭代。这个组件将始终显示三次，我希望它们显示在一行中（每个组件一列）。我看到的示例为每一列手动添加了“flex:1；”等等，但由于我不可能迭代它

看起来是这样的：

<div className="styles.grid">
  <!-- stuff  -->
</div>

---

不起作用。有什么帮助吗？

尝试在子列上使用

flex-grow:1

。这告诉孩子们要平等地成长，以填补父母的空白

有关flexbox的更多信息：

下面是一个简单的3列示例，其中每列的扩展相等

.parent{
宽度：100%；
高度：200px；
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
}
上校{
柔性生长：1；
高度：200px；
边框：1px纯黑；
}

1.
2.
3.

您可以删除

柔性包装

，使所有柔性项目位于同一行，并为每个柔性项目提供三分之一的宽度

示例

函数应用程序（）{
返回(
福
酒吧
巴兹
);
}
render（，document.getElementById（“根”））
.grid{
显示器：flex；
}
.表格项目{
宽度：33.33333%；
高度：200px；
}
.项目-1{
背景色：红色；
}
.项目-2{
背景颜色：绿色；
}
.项目-3{
背景颜色：蓝色；
}
这是您可能正试图实现的目标：


.grid{
显示器：flex；
柔性包装：包装；
对齐项目：项目之间的间距；
}
.表格项目{
宽度：30%；
}

项目内容
项目内容
项目内容
项目内容
项目内容
项目内容
项目内容
项目内容
项目内容
项目内容
flex-wrap:wrap

会导致您的行从一行断开，如果内容不能并排放置，则会导致多行断开。尝试删除它？您是否尝试过使用

float:left

？

.grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}