带包装的 Flexbox 库

Question

我正在尝试使用 flexbox 为我的网站创建一个响应式图片库。但是，我试图让它换行到下一行并保持秩序，我遇到了麻烦。例如：

桌面
1,2,3
4,5,6等
平板电脑
1,2
3,4等
手机
1
2等

请查看我包含的示例代码。

.row {
  display: flex;
  flex-wrap: wrap;
}

.column {
  flex: 33%;
  max-width: 33%;
}

.column img {
  vertical-align: middle;
  width: 100%;
}

@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}

<div class="row">
  <div class="column">
    <figure>
      <img src="https://img.webnots.com/2014/04/112.png">
      <figcaption>Caption 1</figcaption>
    </figure>
    <figure>
      <img src="https://img.webnots.com/2014/04/42.png">
      <figcaption>Caption 4</figcaption>
    </figure>
  </div>
  <div class="column">
    <figure>
      <img src="https://img.webnots.com/2014/04/22.png">
      <figcaption>Caption 2</figcaption>
    </figure>
    <figure>
      <img src="https://img.webnots.com/2014/04/52.png">
      <figcaption>Caption 5</figcaption>
    </figure>
  </div>
  <div class="column">
    <figure>
      <img src="https://img.webnots.com/2014/04/32.png">
      <figcaption>Caption 3</figcaption>
    </figure>
    <figure>
      <img src="https://img.webnots.com/2014/04/62.png">
      <figcaption>Caption 6</figcaption>
    </figure>
  </div>
</div>

Answer 1

我要做的第一件事是将其嵌套在container 中。 Flex 按标记顺序工作，因此我将您的顺序切换回正确的数字顺序。然后，我要做的就是将每个figure 嵌套在它们自己的 div 中。我只是用你的column div 来演示。然后删除 media queries 并让 flex 做它的事情。

主要问题是您试图将它们分成 3 行，但每个 div 有 2 个嵌套，并试图将 max-width 设置为 div。要拥有 3 行，它们应该嵌套在自己的 div 中，width: 33%;

编辑 ~ 我制作了 min-width: 200px;，因为您的图像渲染大约为 160 像素。 200px 将是移动设备上的一个很好的突破点。检查您的移动开发工具。

.row {
  display: flex;
  flex-wrap: wrap;
}

.column {
  min-width: 200px;
  width: 33.33%;
}

.container {
  margin: auto;
  width: 100%;
}

<div class="container">
  <div class="row">
    <div class="column">
      <figure>
        <img src="https://img.webnots.com/2014/04/112.png">
        <figcaption>Caption 1</figcaption>
      </figure>
    </div>
    <div class="column">
      <figure>
        <img src="https://img.webnots.com/2014/04/42.png">
        <figcaption>Caption 2</figcaption>
      </figure>
    </div>
    <div class="column">
      <figure>
        <img src="https://img.webnots.com/2014/04/22.png">
        <figcaption>Caption 3</figcaption>
      </figure>
    </div>
    <div class="column">
      <figure>
        <img src="https://img.webnots.com/2014/04/52.png">
        <figcaption>Caption 4</figcaption>
      </figure>
    </div>
    <div class="column">
      <figure>
        <img src="https://img.webnots.com/2014/04/32.png">
        <figcaption>Caption 5</figcaption>
      </figure>
    </div>
    <div class="column">
      <figure>
        <img src="https://img.webnots.com/2014/04/62.png">
        <figcaption>Caption 6</figcaption>
      </figure>
    </div>
  </div>
</div>

Answer 2

您的 HTML 元素设置不正确。为了达到你想要的，你不应该把相同的元素“第一”和“第四”。虽然它在桌面上看起来不错，但您无法将元素“第二”或“第三”放在它们之间。您将只能更改这些元素在 .非常基本的 HTML 和 CSS 内容。

我建议您将类“列”重命名为“单元格”并将它们按顺序排列：

<div class="row">
  <div class="cell">
    <figure>
      <img src="https://img.webnots.com/2014/04/112.png">
      <figcaption>Caption 1</figcaption>
    </figure>
   </div>
   <div class="cell">
    <figure>
      <img src="https://img.webnots.com/2014/04/112.png">
      <figcaption>Caption 2</figcaption>
    </figure>
   </div>
   <div class="cell">
    <figure>
      <img src="https://img.webnots.com/2014/04/112.png">
      <figcaption>Caption 3</figcaption>
    </figure>
   </div>
   <div class="cell">
    <figure>
      <img src="https://img.webnots.com/2014/04/112.png">
      <figcaption>Caption 4</figcaption>
    </figure>
   </div>
   <div class="cell">
    <figure>
      <img src="https://img.webnots.com/2014/04/112.png">
      <figcaption>Caption 5</figcaption>
    </figure>
   </div>
   <div class="cell">
    <figure>
      <img src="https://img.webnots.com/2014/04/112.png">
      <figcaption>Caption 6</figcaption>
    </figure>
   </div>
</div>

当然，在您的 CSS 文件中将 .column 更改为 .cell

这样您将在平板电脑和移动设备上实现您想要的响应式外观。