Как выровнять карточки flexbox?

Question

[4mn13y]

https://codepen.io/4MN13Y/pen/GRGQxOK добрый день, как сделать что бы карточки выравнивались всегда по большей из них?начиная снизу вверх. В итоге должно получиться так как на картинке.

Comments

[Вадим]

Что значит "выравнивались"?
Чем Ваш пример на codepen отличается от скриншота?
Тем что ширина у них разная? Это так не работает. Flexbox по высоте в строке выравнивает по большей. не по ширине.
Нужно сетку делать чтобы одинаковая ширина была. Ну или как минимум вручную её задать.
Ну на худой конец всем flex-grow: 1; но это не выравнивание по большем. А равномерное заполнение.

[4mn13y]

Вадим, в моем примере один блок выше другого, с шириной проблем нет, дело в высоте, если я в карточку добавляю контент, то она вытягивается вверх ,а другая нет.

[Вадим]

4mn13y, А ну так по ссылке там одинаковые размеры по высоте.
Зачем Вы align-items: flex-end задали? Оно выравнивает карточки по низу строки. Уберите и будут одной высоты всегда, по большей.

[4mn13y]

@MrDecoy, карточки в кодпене разной высоты, align-items: flex-end задал для того что бы текст с рамкой выровнялись по нижней границе, как на картинке.Если свойство убрать то текст с рамкой ровняются по верху и придется задавать каждой карточке разные марджины или паддинги.

[Вадим]

4mn13y, на 2к мониторе одинаковая высота. На fullHD да, уже начинает быть разной.

Ох... так а зачем же Вы текст позиционируете через padding...
Сделайте карточке

display: flex; flex-direction: column; min-height: 320px

.
padding сделайте "адекватным" сверху. Например такой же как и снизу.
А для .text: margin-top: auto

Ну и соответственно align-items: end убрать

[Ankhena]

.inner {
  display: flex;
  min-height: 320px;
- align-items: flex-end;
}
.card {
  background-image: url(https://img5.goodfon.ru/wallpaper/nbig/3/73/abstraktsiia-antisfera-vodovorot-krasok-kartinka-chernyi-fon.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
- padding: 140px 30px 20px;
+ padding: 20px 30px 20px;
  max-width: 25%;
  margin-right: 10px;
  
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
}

[4mn13y]

Вадим, только начал обучение, поэтому через паддинги сделал),спасибо за помощь.

[4mn13y]

Ankhena,спасибо

[4mn13y]

Вадим, а можно ли как то сделать, что бы блок с текстом внутри рамки тоже выравнивался по большему, в зависимости от увеличения контента?Их нужно будет обьединить в общий Флекс контейнер? Сейчас блоки выстраиваются по фону.Надеюсь правильно объяснил)

[Вадим]

4mn13y, Если Вы имееме в виду вариант, что бы у Вас не только карточки выравнивались по большей в строке, но и внутри карточек блок с одним и тем же классом, как у вас, например, .text так же принимали одинаковы размер по высоте, как больший из них, то нет. На flex так не выйдет.
И вообще на CSS так не выйдет. Пока что. Сабгриды, которые пока что плохо поддерживаются - будут решать этот вопрос.
Сейчас только на js, либо "жёсткая" установка размеров.

[4mn13y]

Вадим, понял,спасибо.

Answer 1

[Ottaliya Butovsky]

Насколько я понял вам нужно заменить значение flex-end на center в align-items у класса inner
(так же нет смысла прописывать дважды border-box после звездочки)