Как сделать, чтобы кнопка всегда была на одном уровне?

Question

[olya095]

вне зависимости от высоты картинок (на скриншоте показана линия, по которой нужно выровнять)



https://jsfiddle.net/wot2dnbp/

Answer 1

[Ankhena]

Уберите align-items: center у .panel__wrap
Картинку выравнивайте отдельно.

Answer 2

[andand44]

align-items: flex-end поможет.

.panel__wrap {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	margin: 0 -10px;
}

А если нужно более аккуратно чтобы выглядело, то нужно .panel__image задать фиксированную высоту, а вложенному изображению добавить object-fit: cover;
https://jsfiddle.net/vfz4t52y/1/

Answer 3

[ForSureN1]

Можете задать flex-direction: column, и надписи дать margin-top: auto, надпись всегда будет прибита к низу

Comments

[Ankhena]

Если вы всё же откроете песочницу от автора, то во-первых, увидите, что именно это там и написано, а также убедитесь, что нет, не всегда.

[ForSureN1]

Ankhena, На самом деле, если элемента всего 2, то уместно использование space-between, из чего будет тот же самый эффект

[ForSureN1]

Ankhena, И да, лаконичнее будет если у картинок будет фиксированная высота, карточки как никак, которые по смыслу не отличаются

[Ankhena]

ForSureN1,

На самом деле, если элемента всего 2, то уместно использование space-between, из чего будет тот же самый эффект

Да, но не тот, который нужен автору вопроса.

лаконичнее будет

Если дизайнеру приспичило центрировать картинки по вертикали, но наша с вами лаконичность ему не указ.