时间戳

首页 > 解决方案 > CSS3 Grid fill space in last row

html - CSS3 Grid fill space in last row

问题描述

Given is this masonry image gallery by use of flex. https://codepen.io/t-book/pen/pqvjjO

On a desktop we get 4 cols. Due to flex: auto the last row children share half of the space of the last row but I´d like to force them to keep the width of previous columns as shown here.

How can I target orphans in last row if they´re less them 4? I think I would need to give these childs 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>

标签： htmlcssflexbox

解决方案

由于 flex: auto 最后一行子项共享最后一行空间的一半，但我想强制他们保持前列的宽度

添加max-width到弹性项目.pwpswp-gallery__item--flex将确保即使该行只有 1 到 2 个项目，每个弹性项目也不会被拉伸以适应整行。

.pwpswp-gallery__item--flex {
  flex: auto;
  height: 350px;
  min-width: 150px;
  /*added max-width */
  max-width: 380px;
}

请参阅此处的工作示例。

推荐阅读