Question

鉴于此是使用flex的砖石图片库。 Go language specification

在台式机上，我们得到4个列。由于flex: auto，最后一行的孩子共享最后一行的一半空间，但是我想强迫他们保持前几列https://codepen.io/t-book/pen/pqvjjO的宽度。

如果孤儿人数少于4，我该如何针对他们呢？我想我需要给这些孩子flex:inherit。

.pwpswp-gallery {
  margin: 1% auto;
  width:98%;
}

.pwpswp-gallery__inner {
  display: flex;
  width: 100%;
}

.pwpswp-gallery__inner--flex {
  flex-flow: row wrap;
  justify-content: flex-start;
}

.pwpswp-gallery__inner--flex{
  margin-left: -1%; /* Adjustment for the gutter */
}

.pwpswp-gallery__item {
  overflow: hidden;
  margin: 0 0 8px 8px;  /* Some Gutter */
  background-color: #333;
  color: white;
  position: relative;
}

.pwpswp-gallery__item--flex {
  flex: auto;
  height: 350px;
  min-width: 150px;
}

@media only screen and (min-width: 1024px) {
  /* Horizontal masonry bricks on desktop-sized screen */
  .pwpswp-gallery__item--flex:nth-child(4n+1) {
    width: 350px;
  }
  .pwpswp-gallery__item--flex:nth-child(4n+2) {
    width: 325px;
  }
  .pwpswp-gallery__item--flex:nth-child(4n+3) {
    width: 180px;
  }
  .pwpswp-gallery__item--flex:nth-child(4n+4) {
    width: 380px;
  }
}

@media only screen and (max-width: 1023px) and (min-width: 768px) {
  /* Horizontal masonry bricks on tabled-sized screen */
  .pwpswp-gallery__item--flex:nth-child(4n+1) {
    width: 200px;
  }
  .pwpswp-gallery__item--flex:nth-child(4n+2) {
    width: 250px;
  }
  .pwpswp-gallery__item--flex:nth-child(4n+3) {
    width: 120px;
  }
  .pwpswp-gallery__item--flex:nth-child(4n+4) {
    width: 280px;
  }


}

.masonry-img {
 object-fit: cover;
 width: 100%;
 height: 100%;
}

.pwpswp-gallery__caption{
  display: none;
}

<div class="pwpswp-gallery pwpswp-gallery--flex" itemscope="" itemtype="http://schema.org/ImageGallery" data-pswp-options="{&quot;shareEl&quot;:false,&quot;indexIndicatorSep&quot;:&quot; von &quot;,&quot;closeOnScroll&quot;:false,&quot;captionEl&quot;:true,&quot;bgOpacity&quot;:1}">
<div class="pwpswp-gallery__inner pwpswp-gallery__inner--flex">
  <figure class="pwpswp-gallery__item pwpswp-gallery__caption--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/300?image=2" class="masonry-img" alt="Masonry Brick #2"></a><figcaption
        class="pwpswp-gallery__caption pwpswp-gallery__caption--flex" itemprop="caption description">test</figcaption></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/200/500?image=3" class="masonry-img" alt="Masonry Brick #3"></a></figure> 
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/250?image=4" class="masonry-img" alt="Masonry Brick #4"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/450?image=5" class="masonry-img" alt="Masonry Brick #5"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/350?image=6" class="masonry-img" alt="Masonry Brick #6"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/600?image=18" class="masonry-img" alt="Masonry Brick #7"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/700?image=8" class="masonry-img" alt="Masonry Brick #8"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/200?image=19" class="masonry-img" alt="Masonry Brick #9"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/300?image=10" class="masonry-img" alt="Masonry Brick #10"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/420?image=11" class="masonry-img" alt="Masonry Brick #11"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/450?image=12" class="masonry-img" alt="Masonry Brick #12"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/550?image=13" class="masonry-img" alt="Masonry Brick #13"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/640?image=14" class="masonry-img" alt="Masonry Brick #14"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/420?image=15" class="masonry-img" alt="Masonry Brick #15"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/430?image=16" class="masonry-img" alt="Masonry Brick #16"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/340?image=17" class="masonry-img" alt="Masonry Brick #17"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/240?image=27" class="masonry-img" alt="Masonry Brick #18"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/780?image=19" class="masonry-img" alt="Masonry Brick #19"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/470?image=20" class="masonry-img" alt="Masonry Brick #20"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/380?image=21" class="masonry-img" alt="Masonry Brick #21"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/240?image=22" class="masonry-img" alt="Masonry Brick #22"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/900?image=23" class="masonry-img" alt="Masonry Brick #23"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/480?image=24" class="masonry-img" alt="Masonry Brick #24"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/300?image=25" class="masonry-img" alt="Masonry Brick #25"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/400?image=26" class="masonry-img" alt="Masonry Brick #26"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/500?image=27" class="masonry-img" alt="Masonry Brick #27"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/520?image=28" class="masonry-img" alt="Masonry Brick #28"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/920?image=29" class="masonry-img" alt="Masonry Brick #29"></a></figure>
  <figure class="pwpswp-gallery__item pwpswp-gallery__item--flex"><a href="http://google.com" pwpswp-gallery__link pwpswp-gallery__link--flex><img src="https://unsplash.it/700/400?image=30" class="masonry-img" alt="Masonry Brick #30"></a></figure>

</div>
</div>

Answer 1

由于弯曲：自动使最后一行的孩子共享最后一行的一半空间，但我想强迫他们保持前几列的宽度

将.pwpswp-gallery__item--flex添加到弹性项目.pwpswp-gallery__item--flex { flex: auto; height: 350px; min-width: 150px; /*added max-width */ max-width: 380px; }将确保即使该行只有1到2个项目，每个弹性项目也不会被拉伸以适合整个行。

{{1}}

请参阅工作示例here.

最后一行中的CSS3网格填充空间

1 个答案: