html - Css在行和列中显示div

Question

我有一个数据数组，需要按顺序创建 div。问题是像下面这样显示这些 div:

可以用 CSS 实现吗？

Answer 1

使用flexbox实现上述配置。

请检查并让我知道您的反馈。谢谢!

.wrapper {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 150px;
}
.wrapper > div {
  background: #ddd;
  line-height: 50px;
  height: 50px;
  margin: 5px;
  text-align: center;
}

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>