我在React中有一个组件,我在一个循环中进行迭代.该组件将始终显示3次,我希望它们在一行中显示(每个组件一列).我手动看到的示例添加了“ flex：1;”等等,对于每一列,但由于迭代是不可能的.
看起来像这样：
<div className="styles.grid">
<!-- stuff -->
</div>
上面将显示三遍,并希望它们全部放在一行中(每行都将成为一列).
我努力了：
.grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}
不起作用.有什么帮助吗？
最佳答案
您可以删除flex-wrap,使所有flex项目都位于同一行,并为每个flex项目提供宽度的三分之一.
例
function App() {
return (
<div className="grid">
<div className="grid-item item-1">Foo</div>
<div className="grid-item item-2">Bar</div>
<div className="grid-item item-3">Baz</div>
</div>
);
}
ReactDOM.render(<App />,document.getElementById("root"));.grid {
display: flex;
}
.grid-item {
width: 33.33333%;
height: 200px;
}
.item-1 {
background-color: red;
}
.item-2 {
background-color: green;
}
.item-3 {
background-color: blue;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>