具有n行并作为列扩展的CSS表格布局

Question

我一直在努力使用这种CSS布局。我有n项，其金额可能会动态增加。我想只有n行和许多或无限列布局。

所以，让我们说n 2 ，我有 3 项，这就是我的项目应该是这样的，

-----------
| 1 || 3 |
-----------
| 2 |
-----------

对于相同的n， 6 项目，

-----------------
| 1 || 3 || 5 |
-----------------
| 2 || 4 || 6 |
-----------------

依此类推......

我尝试用float: left修补它而没有运气。现在我有点学习弹性布局，这让我陷入困境。

请帮助:)这是我的Fiddle

注意：我的所有商品都具有相同的width和height。

Answer 1

这样的东西？

jsFiddle 1

＆＃13;

＆＃13;

.items {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
/* Below this is just styling */

.items {
  background-color: #0f9c8a;
  padding: 4px;
  height: 250px;
  width: 100%;
}
.item {
  width: 100px;
  height: 100px;
  background-color: #6f6ac2;
  border: 1px solid #fff;
  margin: 2px;
  text-align: center;
  line-height: 100px;
}

＆＃13;

<div class="items">
  <div class="item">
    Item 1
  </div>
  <div class="item">
    Item 2
  </div>
  <div class="item">
    Item 3
  </div>
  <div class="item">
    Item 4
  </div>
  <div class="item">
    Item 5
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

更新，因为您需要将.item div对齐到左侧，只需将align-content:flex-start;添加到容器.items，如下所示：

jsFiddle 2

＆＃13;

＆＃13;

.items {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
}
/* Below this is just styling */

.items {
  background-color: #0f9c8a;
  padding: 4px;
  height: 250px;
  width: 1000px;
}
.item {
  width: 100px;
  height: 100px;
  background-color: #6f6ac2;
  border: 1px solid #fff;
  margin: 2px;
  text-align: center;
  line-height: 100px;
}

＆＃13;

<div class="items">
  <div class="item">
    Item 1
  </div>
  <div class="item">
    Item 2
  </div>
  <div class="item">
    Item 3
  </div>
  <div class="item">
    Item 4
  </div>
  <div class="item">
    Item 5
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;