javascript - 如何创建可折叠的网格、表格或列

Question

我想在 2 列中显示数据。当有足够的空间时，数据应如下所示:

|  data   |  data2  |
|  data3  |  data4  |
|  data5  |  data6  |

如果用户调整窗口大小，没有足够的空间来显示两列，我希望数据看起来像这样:

|  data   |
|  data2  |
|  data3  |
|  data4  |
|  data5  |
|  data6  |

如果我猜的话，网上已经有关于此的问题和帖子，但我不知道要搜索什么。非常感谢链接、提示、示例代码和指南!

Answer 1

如果不需要支持IE9及以下可以使用display: flex

.items {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
}

.item {
    flex-basis: 50%;
}

@media only screen and (max-width: 767px) {
    .item {
        flex-basis: 100%;
    }
}

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