html-迭代三列flexbox

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