我在React中有一个组件,我在一个循环中进行迭代.该组件将始终显示3次,我希望它们在一行中显示(每个组件一列).我手动看到的示例添加了“ flex：1;”等等,对于每一列,但由于迭代是不可能的.
看起来像这样：
@H_301_8@<div className="styles.grid"> <!-- stuff --> </div>
上面将显示三遍,并希望它们全部放在一行中(每行都将成为一列).
我努力了：
@H_301_8@.grid { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; }
不起作用.有什么帮助吗？
最佳答案
您可以删除flex-wrap,使所有flex项目都位于同一行,并为每个flex项目提供宽度的三分之一.
例
@H_301_8@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"));
@H_301_8@.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; }
@H_301_8@<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>
