html-迭代三列flexbox

概述我在React中有一个组件,我在一个循环中进行迭代.该组件将始终显示3次,我希望它们在一行中显示(每个组件一列).我手动看到的示例添加了“ flex：1;”等等,对于每一列,但由于迭代是不可能的.看起来像这样：<div className='styles.grid'> <!-- stuff --> </div> 上面

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

总结

以上是内存溢出为你收集整理的html-迭代三列flexbox 全部内容，希望文章能够帮你解决html-迭代三列flexbox 所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。