Я хочу получить сетчатый макет, где каждый столбец в строке имеет одинаковую высоту. Каждый столбец содержит изображение, поэтому оно также должно сохранять пропорции изображения.
Текущее решение состоит в том, чтобы установить свойство flex-grow для отношения изображения. Это работает, но может привести к очень большим изображениям, что в моем случае нежелательно.
Я бы хотел, чтобы изображения умещались в одну строку в случае, если осталось отрицательное пространство.
Свойство flex-shrink работает аналогично свойству flow-grow. Отрицательное пространство будет распределено между элементами на основе свойства flex-shrink.
Однако в поведении flex-shrink есть предостережение: элемент никогда не будет уменьшаться до размера, меньшего, чем его содержимое. В моем случае это означает, что столбец никогда не будет сжиматься до размера, меньшего размера изображений, которые он содержит.
Я могу обойти эту проблему, установив для свойства flex-based меньшее значение. Я играл с этим, но либо испортил обёртку, либо равную высоту.
Что бы я хотел случиться:
Рассмотрим следующую разметку:
.container {
display: flex;
flex-wrap: wrap;
width: 600px;
}
.img-container {
padding: 5px;
box-sizing: border-box;
flex-basis: auto;
}
.img {
width: 100%;
height: auto;
}
<div class="container">
<div style="flex-grow: 1; flex-shrink: 1;" class="img-container">
<img class="img" src="https://via.placeholder.com/200x200/" alt="">
</div>
<div style="flex-grow: 1; flex-shrink: 1;" class="img-container">
<img class="img" src="https://via.placeholder.com/200x200/" alt="">
</div>
<div style="flex-grow: 2; flex-shrink: 2;" class="img-container">
<img class="img" src="https://via.placeholder.com/400x200/" alt="">
</div>
</div>
Сумма ширины составляет 200 + 200 + 400 = 800 пикселей, что означает наличие 800-600 = 200 пикселей отрицательного пространства. Значения flex-shrink требуют, чтобы первый и второй элементы получали 1 часть отрицательного пространства, а третий элемент - 2 части.
Расчет это дает нам:
- Ширина, которую нужно удалить из первого пункта: 1/4 * 200 = 50
- Ширина, которую нужно удалить из второго пункта: 1/4 * 200 = 50
- Ширина для удаления из пункта три: 2/4 * 200 = 100
Эти значения ширины являются правильными и сохраняют правильные соотношения, но, как я упоминал ранее, этого достичь невозможно, поскольку flex-base - это естественная ширина элементов изображения.
У вас, ребята, есть предложения, как решить эту проблему?