带包装的 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

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

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

<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

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

Answer 2

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

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

编辑 ~ 我制作了 min-width: 200px; 因为你的图像呈现在大约 160px。 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>

带包装的 Flexbox 画廊

Flexbox Gallery With Wrapping

html

css

media-queries

flexbox