Адаптивная оправданная галерея изображений с Flexbox - PullRequest
Новая
       20

Адаптивная оправданная галерея изображений с Flexbox

0 голосов
/ 23 октября 2018

Я пытаюсь создать галерею изображений на основе этого примера: 

body { margin: 0; background: #333; }
header { 
  padding: .5vw;
  font-size: 0;
  display: -ms-flexbox;
  -ms-flex-wrap: wrap;
  -ms-flex-direction: column;
  -webkit-flex-flow: row wrap; 
  flex-flow: row wrap; 
  display: -webkit-box;
  display: flex;
}
header div { 
  -webkit-box-flex: auto;
  -ms-flex: auto;
  flex: auto; 
  width: 200px; 
  margin: .5vw; 
}
header div img { 
  width: 100%; 
  height: auto; 
}
@media screen and (max-width: 400px) {
  header div { margin: 0; }
  header { padding: 0; }
  
}
<header>
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-1.jpg" alt></div>
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-2.jpg" alt></div>
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-3.jpg" alt></div>
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-4.jpg" alt></div>
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-5.jpg" alt></div>
  <!-- images placed inside block elements to deal with a Firefox rendering bug affecting  scaled flexbox images -->
</header>

Все мои изображения имеют размер 200x200px, они работают как шарм, но мне нужно заменить последнюю строку тем же фиксированным исходным размером изображения, выровненным по левому краю.

Я пытался добавить элемент ::after, заполняющий пробел, как предлагалось в других ответах, но у меня ничего не получилось.

В конечном счете, я думаю о добавлении поддельных изображенийбез отображения на основе медиа-запросов и количества изображений в строке, используя Javascript.

Есть ли другой лучший способ добиться этого?

Мой код: 

.c-gallery {
    font-size: 0;
    max-width: 1600px;
    display: flex;
    flex-flow: row wrap;
    a {
        flex: auto;
        width: 150px;
        margin: 5px 5px 0 0;
          img {
              height: auto;
          }
       }
    }

1 Ответ

0 голосов
/ 23 октября 2018

Как насчет следующего.Он использует сетку CSS.Играя с grid-template-columns: repeat(3, 200px);, вы можете изменить количество столбцов. 

body { margin: 0; background: #333; }
header { 
  padding: .5vw;
  font-size: 0;
  display: grid;
  grid-template-columns: repeat(3, 200px);
  grid-gap: .5vw
}

header div img { 
  width: 100%; 
  height: auto; 
}
@media screen and (max-width: 400px) {
  header div { margin: 0; }
  header { padding: 0; }
}
<header>
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-1.jpg" alt></div>
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-2.jpg" alt></div>
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-3.jpg" alt></div>
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-4.jpg" alt></div>
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-5.jpg" alt></div>
  <!-- images placed inside block elements to deal with a Firefox rendering bug affecting  scaled flexbox images -->
</header>
...