Question

我有一个固定大小的图像网格。每行的图像数量随窗口的宽度而增长。这可以在以下代码段中看到：

.list {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.thumbnail {
  margin: 0 1em 2em
}

.title {
  flex: 1 100%;
  width: 300px
}

<div class="list">
  <h1 class="title">Cats</h1>
  <a href="" class="thumbnail"><img src="https://lorempixel.com/300/300/cats/1" alt=""></a>
  <a href="" class="thumbnail"><img src="https://lorempixel.com/300/300/cats/2" alt=""></a>
  <a href="" class="thumbnail"><img src="https://lorempixel.com/300/300/cats/3" alt=""></a>
  <a href="" class="thumbnail"><img src="https://lorempixel.com/300/300/cats/4" alt=""></a>
  <a href="" class="thumbnail"><img src="https://lorempixel.com/300/300/cats/5" alt=""></a>
  <a href="" class="thumbnail"><img src="https://lorempixel.com/300/300/cats/6" alt=""></a>
  <a href="" class="thumbnail"><img src="https://lorempixel.com/300/300/cats/7" alt=""></a>
  <a href="" class="thumbnail"><img src="https://lorempixel.com/300/300/cats/8" alt=""></a>
</div>

我的问题是.title如何与第一张图片的左上角对齐？

Answer 1

鉴于您在图像上设置了固定宽度并且在list上设置了最大宽度，您可以使用伪来平衡title。

使这项工作的原因在于title和伪只是以相同的方式定位，并且具有与图像相同的逻辑，并且总是将第一只猫推到下一行。 / p>

如果连续需要3张或更多图像，请使用媒体查询来控制伪的宽度。

请注意，我也将照片更改为虚拟图像，因为由于某些原因猫不会一直正常加载。

Stack snippet

.list {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.thumbnail {
  margin: 0 1em 2em;
}

.title {
  width: 300px;                  /*  match the title/images width/margin  */
  margin: 0 0.5em 1em;           /*  h1 default font is 2em, so we need only 0.5 here  */
  order: -1;                     /*  move before the pseudo  */
}

.list::before {                  /*  added pseudo  */
  content: '';
  width: 300px;                  /*  match the title/images width/margin  */
  margin: 0 1em 0;
}

<div class="list">
  <h1 class="title">Cats</h1>
  <a href="" class="thumbnail">
    <img src="https://placehold.it/300/ddd?text=cat 1" alt="">
  </a>
  <a href="" class="thumbnail">
    <img src="https://placehold.it/300/ddd?text=cat 2" alt="">
  </a>
  <a href="" class="thumbnail">
    <img src="https://placehold.it/300/ddd?text=cat 3" alt="">
  </a>
  <a href="" class="thumbnail">
    <img src="https://placehold.it/300/ddd?text=cat 4" alt="">
  </a>
  <a href="" class="thumbnail">
    <img src="https://placehold.it/300/ddd?text=cat 5" alt="">
  </a>
  <a href="" class="thumbnail">
    <img src="https://placehold.it/300/ddd?text=cat 6" alt="">
  </a>
</div>

Answer 2

如果您希望标题与第一张图像之间存在连接，请在代码中拼写出来。

＆＃13;

.list {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: flex-end;
  max-width: 800px;
  margin: 3em auto 0;
}

.thumbnail {
  margin: 0 1em 2em;
}

h1 {
  margin: 0;
}

＆＃13;

<div class="list">
  <div class="thumbnail">
    <h1 class="title">Cats</h1>
    <a href=""><img src="https://lorempixel.com/300/300/cats/1" alt=""></a>
  </div>
  <a href="" class="thumbnail"><img src="https://lorempixel.com/300/300/cats/2" alt=""></a>
  <a href="" class="thumbnail"><img src="https://lorempixel.com/300/300/cats/3" alt=""></a>
  <a href="" class="thumbnail"><img src="https://lorempixel.com/300/300/cats/4" alt=""></a>
  <a href="" class="thumbnail"><img src="https://lorempixel.com/300/300/cats/5" alt=""></a>
  <a href="" class="thumbnail"><img src="https://lorempixel.com/300/300/cats/6" alt=""></a>
  <a href="" class="thumbnail"><img src="https://lorempixel.com/300/300/cats/7" alt=""></a>
  <a href="" class="thumbnail"><img src="https://lorempixel.com/300/300/cats/8" alt=""></a>
</div>

＆＃13;

jsFiddle demo

Answer 3

我一直在研究这个问题，并找到了另一个我想分享的解决方案：

.list {
  display: flex;
  flex-flow: row wrap;
  max-width: 300px;
  margin: 0 auto;
}

.thumbnail {
  flex: 1 auto;
  margin: 0 1em 2em
}

.title {
  flex: 1 100%;
  margin: 0 0.5em 1em;
  order: 0;
}

@media all and (min-width: 700px) {
  .list {
    max-width: calc((300px + 2em) * 2);
  }
}

@media all and (min-width: 1100px) {
  .list {
    max-width: calc((300px + 2em) * 3);
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <div class="list">
    <h1 class="title">Cats</h1>
    <a href="" class="thumbnail">
      <img src="https://placehold.it/300/ddd?text=cat 1" alt="">
    </a>
    <a href="" class="thumbnail">
      <img src="https://placehold.it/300/ddd?text=cat 2" alt="">
    </a>
    <a href="" class="thumbnail">
      <img src="https://placehold.it/300/ddd?text=cat 3" alt="">
    </a>
    <a href="" class="thumbnail">
      <img src="https://placehold.it/300/ddd?text=cat 4" alt="">
    </a>
    <a href="" class="thumbnail">
      <img src="https://placehold.it/300/ddd?text=cat 5" alt="">
    </a>
    <a href="" class="thumbnail">
      <img src="https://placehold.it/300/ddd?text=cat 6" alt="">
    </a>
  </div>
</body>

</html>

<强>为什么吗

标题与第一个缩略图之间没有关系。
因为我需要增加min-width的{{1}}并将LGSon answer作为参考我最终会遇到设置媒体查询的问题，列表中的值会进入更多列很难获得。

如何吗

只需关注Temani Afif comment并使用限制所有.list .list的媒体查询，这样我就可以预测不同的布局，并且标题将被限制在此宽度内。

我接受LGSon答案，因为原始问题未提及width .list可能会发生变化的事实。除此之外，它将在不引入width和第一张图像之间的关系的情况下解决我的问题。

Flexbox对齐与居中图像网格相关的第一项

3 个答案:

jsFiddle demo