Почему флекс элементы не сжимаются?

Question

[Сергей Бурдужа]

Добрый день.
Есть галерея

Есть 4 ряда.

.gallery
			.gallery-twice
				img(src="assets/i/gallery/1.jpg", alt="")
				img(src="assets/i/gallery/2.jpg", alt="")
			.gallery-tripple
				img(src="assets/i/gallery/3.jpg", alt="")
				img(src="assets/i/gallery/4.jpg", alt="")
				img(src="assets/i/gallery/5.jpg", alt="")
			.gallery-twice
				img(src="assets/i/gallery/6.jpg", alt="")
				img(src="assets/i/gallery/7.jpg", alt="")
			.gallery-tripple
				img(src="assets/i/gallery/8.jpg", alt="")
				img(src="assets/i/gallery/9.jpg", alt="")
				img(src="assets/i/gallery/10.jpg", alt="")

И стили

.gallery-twice,
.gallery-tripple {
	display: flex;
	align-items: flex-start;
	margin-bottom: 6px;
	& > * {
		 &:not(:last-child){
				margin-right: 6px;
		}
	}
	img {
		flex-shrink: 0;
                flex-grow: 1;
	}
}

Только не пойму, почему картинки не сжимаются?



Как решить эту проблему?

Comments

[tyzberd]

flex-shrink: 0; наверно убрать

[Сергей Бурдужа]

tyzberd, Я потом добавил, но ничего не изменилось.

[SagePtr]

Сергей Бурдужа, потому что по умолчанию 0, не убирать его, а поставить flex-shrink: 1;

[Вадим Кот]

SagePtr, Хотя бы документацию начали читать, прежде чем комментировать - https://developer.mozilla.org/ru/docs/Web/CSS/flex...

Answer 1

[Антон Усачев]

img {
    /* вместо */
    flex-shrink: 0;
    flex-grow: 1;
    /* поставить это */
    flex: 1 1 auto;
}

Хотя правильней было бы каждую картинку обернуть дивом со стилями выше, а самим картинкам дать:

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Comments

[Сергей Бурдужа]

Спасибо.
Я уже использовал гриды.

.gallery-twice {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 6px;
	margin-bottom: 6px;
}

.gallery-tripple {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 6px;
	margin-bottom: 6px;
}