Question

我试图构建一个非常简单的CSS flex图库，根据容器的大小缩小图像的宽度：

HTML：

<div class="grid-container">
    <div class="grid-item">
        <img src="small-thumb-dpi.jpg" />
        <div>this is the item description</div>
    </div>

    ...(more items here)

</div>

CSS：

.grid-container {
  display: flex;
  flex-flow: row wrap;
}

我遇到的问题可能是因为我使用＆＃34; flex：1 1 auto;＆＃34;对于画廊项目，如：

.grid-item {
    flex: 1 1 auto;
    width: 236px;
    margin: .35vw;        
}

上面的代码创建了我正在寻找的弹性网格，除了最后一行的图像展开以填充可用空间，如：

这是我的代码：

＆＃13;

body {
  margin: 0;
  padding: 10px;
}
.grid-container {
  display: flex;
  flex-flow: row wrap;
}
.grid-item {
  background-color: lightgray;
  flex: 1 1 auto;
  width: 300px;
  margin: .45vw;
  padding: 10px;
  box-sizing: border-box;
}
.grid-container img {
  width: 100%;
  height: auto;
}

＆＃13;

<div class="grid-container">
  <div class="grid-item">
    <img src="https://pbs.twimg.com/media/CZsY7k0WAAA_sk5.jpg" />
    <div classs=item-description>This is the item description</div>
  </div>
  <div class="grid-item">
    <img src="https://pbs.twimg.com/media/CZsY7k0WAAA_sk5.jpg" />
    <div classs=item-description>This is the item description</div>
  </div>
  <div class="grid-item">
    <img src="https://pbs.twimg.com/media/CZsY7k0WAAA_sk5.jpg" />
    <div classs=item-description>This is the item description</div>
  </div>
  <div class="grid-item">
    <img src="https://pbs.twimg.com/media/CZsY7k0WAAA_sk5.jpg" />
    <div classs=item-description>This is the item description</div>
  </div>
  <div class="grid-item">
    <img src="https://pbs.twimg.com/media/CZsY7k0WAAA_sk5.jpg" />
    <div classs=item-description>This is the item description</div>
  </div>
  <div class="grid-item">
    <img src="https://pbs.twimg.com/media/CZsY7k0WAAA_sk5.jpg" />
    <div classs=item-description>This is the item description</div>
  </div>
  <div class="grid-item">
    <img src="https://pbs.twimg.com/media/CZsY7k0WAAA_sk5.jpg" />
    <div classs=item-description>This is the item description</div>
  </div>
  <div class="grid-item">
    <img src="https://pbs.twimg.com/media/CZsY7k0WAAA_sk5.jpg" />
    <div classs=item-description>This is the item description</div>
  </div>
</div>

＆＃13;

Codepen

基本上，我需要最后一行的图像与其他图像的尺寸相同，同时保持图像的flex属性。我怎样才能做到这一点？

Answer 1

调整.grid项目的宽度，如果想要排水沟，请添加边距。

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

.grid-item {
  width: 25%;
  padding: 10px;
  box-sizing: border-box;
  background-color: lightgray;
}

Answer 2

你可以添加一个小忍者驴。

在每只驴上，将flex-basis从auto设置为可容忍的百分比，我选择25%。
```
flex:1 1 25%
```
接下来添加一头额外的驴并在忍者驴身上指定visibility: hidden。
```
.grid-item:last-of-type {
   visibility: hidden;
}
```

顺便说一句，我将每头驴的div分别改为<figure>和<figcaption>。

CODEPEN

段

<!doctype html>
<html>

<head>
  <meta charset='utf-8'>
  <style>
    body {
      margin: 0;
      padding: 10px;
      box-sizing: border-box;
    }
    .grid-container {
      display: flex;
      flex-flow: row wrap;
    }
    .grid-item {
      background-color: lightgray;
      flex: 1 1 25%;
      width: 300px;
      margin: .45vw;
      padding: 10px;
    }
    .grid-item:last-of-type {
      visibility: hidden;
    }
    .grid-item img {
      width: 100%;
      height: auto;
    }
    figcaption {
      text-align: center;
    }
  </style>
</head>

<body>
  <div class="grid-container">
    <figure class="grid-item">
      <img src="https://pbs.twimg.com/media/CZsY7k0WAAA_sk5.jpg" />
      <figcaption>This is the item description</figcaption>
    </figure>
    <figure class="grid-item">
      <img src="https://pbs.twimg.com/media/CZsY7k0WAAA_sk5.jpg" />
      <figcaption>This is the item description</figcaption>
    </figure>
    <figure class="grid-item">
      <img src="https://pbs.twimg.com/media/CZsY7k0WAAA_sk5.jpg" />
      <figcaption>This is the item description</figcaption>
    </figure>
    <figure class="grid-item">
      <img src="https://pbs.twimg.com/media/CZsY7k0WAAA_sk5.jpg" />
      <figcaption>This is the item description</figcaption>
    </figure>
    <figure class="grid-item">
      <img src="https://pbs.twimg.com/media/CZsY7k0WAAA_sk5.jpg" />
      <figcaption>This is the item description</figcaption>
    </figure>
    <figure class="grid-item">
      <img src="https://pbs.twimg.com/media/CZsY7k0WAAA_sk5.jpg" />
      <figcaption>This is the item description</figcaption>
    </figure>
    <figure class="grid-item">
      <img src="https://pbs.twimg.com/media/CZsY7k0WAAA_sk5.jpg" />
      <figcaption>This is the item description</figcaption>
    </figure>
    <figure class="grid-item">
      <img src="https://pbs.twimg.com/media/CZsY7k0WAAA_sk5.jpg" />
      <figcaption>This is the item description</figcaption>
    </figure>
    <figure class="grid-item">
      <img src="https://pbs.twimg.com/media/CZsY7k0WAAA_sk5.jpg" />
      <figcaption>This is the item description</figcaption>
    </figure>
  </div>
</body>

</html>

使最后一行上的图像与flexbox库中的其他图像大小相同

2 个答案:

段