根据设备将项目列表显示为网格或列

Question

我有基本需求。

我有 n 张图片要显示。如果我在计算机上的浏览器上，我想按行显示它们，每行包含 3 张图像。如果我在移动设备上，我想在一列中显示它们，即一个在另一个下面。

我不想使用 bootstrap。

目前我正在考虑用 angular/flex-layout 来管理它，但似乎还有一些工作要做（例如找到行数除以 3 和依此类推）。

不知道有没有更简单的方法

Answer 1

使用 css 媒体查询和 flexbox 很容易做到这一点。

.item {
  width: 50px;
  height: 50px;
  background-color: tomato;
  width: 100%;
  margin: 8px;
}

@media (min-width: 720px) {
  .list {
    display: flex;
    flex-wrap: wrap;
  }
  .item {
    width: calc(33% - 16px);
  }
}

<div class="list">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <!-- however many items you want -->
</div>

Live demo

根据设备将项目列表显示为网格或列

Show a list of items as grid or column depending on the device

angular-flex-layout