迭代三列 flexbox 布局

Question

我在React中有一个组件，正在循环迭代。该组件始终显示三次，我希望它们在一行中显示（每个组件作为一列）。我看到的示例手动为每列添加"flex:1;"等样式，但由于我正在迭代，这是不可能的。

它的样子是这样的：

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

上面的内容将会显示三次，并希望它们都在同一行中（每个将成为一列）。

我尝试过：

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

不起作用。需要帮助吗？

- Arte2

---

flex-wrap: wrap 会导致你的行从一行变成多行，如果内容无法相邻。尝试移除它？ - Tom Finney

你尝试过使用 float: left 吗？ - PYer

Answer 1

尝试在子列上使用flex-grow: 1。这告诉子元素等比例地增长以填充其父元素的宽度。

有关 flexbox 的更多信息，请参见 https://css-tricks.com/snippets/css/a-guide-to-flexbox/。

下面是一个简单的三列示例，每列都会等比例扩展。

.parent {
  width: 100%;
  height: 200px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.col {
   flex-grow: 1;
   height: 200px;
   border: 1px solid black;
}

<div class="parent">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
</div>

- Matthew Varga

Answer 2

你可以移除 flex-wrap 属性，让所有的弹性项目在同一行上，并将每个弹性项目的宽度设置为三分之一。 示例

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>

- Tholle

Answer 3

这可能是您想要实现的内容：

.grid {
  display: flex;
  flex-wrap: wrap;
  align-items: space-between;
}

.grid-item {
  width: 30%;
}

<div class="grid">
  <div class="grid-item">Item content</div>
  <div class="grid-item">Item content</div>
  <div class="grid-item">Item content</div>
  <div class="grid-item">Item content</div>
  <div class="grid-item">Item content</div>
  <div class="grid-item">Item content</div>
  <div class="grid-item">Item content</div>
  <div class="grid-item">Item content</div>
  <div class="grid-item">Item content</div>
  <div class="grid-item">Item content</div>
</div>

Flex容器在超出边界时，使用flex-wrap: wrap;属性会自动换行包裹所有项目。

而且每个flex容器内的项目应设置为width: 30%;。网格中的每第四个项目将被换行到下一行。

- naffiq