Я использую галерею, представляющую столбец, содержащий один или два элемента <div>, охватывающих всю ширину.Столбцы, содержащие несколько элементов <div>, также содержат изображения с различными свойствами высоты и ширины.Мне бы хотелось, чтобы эти столбцы имели одинаковую высоту, а затем как можно больше заполняли ширину, когда между ними есть дополнительное пространство.
Я бы использовал элемент flexbox <div> с фиксированной шириной и * 1006.* имущество.Элементы <div>, которые охватывают всю ширину, имеют свойство max-width: 100%.Строка с несколькими элементами находится внутри элемента контейнера <div>, который охватывает, а затем каждый элемент в другом элементе <div>.Я мог бы получить два на одной и той же линии, но так как они различаются по размерам, я бы не хотел, чтобы каждое изображение имело ширину 50%, потому что тогда пустое пространство находится выше и ниже элемента, а не между ними.
Я пытался повозиться с flex-grow, flex-shrink и flex-basis, однако ни один из них не кажется точным.Я также рассмотрел переключение элементов <div> с двумя элементами на flex-direction: column, а затем обернул их.Это, однако, не работает для меня.
.column {
width: 600px;
display: flex;
flex-wrap: wrap;
}
.smallContain {
min-width: 100%;
display: flex;
align-content: space-between;
}
.smallBox {
flex: 1 1 50%;
}
.largeBox {
min-width: 100%;
}
img {
max-width: 100%;
}
<body>
<div id="container">
<div class="column">
<div class="smallContain">
<div class="box smallBox">
<img src="#" class="imgS">
</div>
<div class="box smallBox">
<img src="#" class="imgS">
</div>
</div>
<div class="box largeBox">
<img src="#" class="imgL">
</div>
<div class="smallContain">
<div class="box smallBox">
<img src="#" class="imgS">
</div>
<div class="box smallBox">
<img src="#" class="imgS">
</div>
</div>
<div class="box largeBox">
<img src="#" class="imgL">
</div>
<div class="smallContain">
<div class="box smallBox">
<img src="#">
</div>
<div class="box smallBox">
<img src="#">
</div>
</div>
<div class="smallContain">
<div class="box smallBox">
<img src="#" class="imgS">
</div>
<div class="box smallBox">
<img src="#" class="imgS">
</div>
</div>
<div class="box largeBox">
<img src="#" class="imgL">
</div>
</div>
</div>
</body>
(В приведенном выше примере класс .imgS относится к маленьким изображениям, а класс .imgL относится к большим изображениям)
Вот пример того, на что я надеюсь, чтобы он выглядел.