Как правильно манипулировать flex`ом что б получилось так как на скрине?

Question

[bpGusar]

Страница merkury-vd.ru/contacts

Тут на скрине блок где имеил и номер телефона в каждой строке на одном уровне, я уже голову сломал как мне их выровнять.

Answer 1

[Александр]

Контейнеру карточки задай:

.card {
  display: flex;
  flex-direction: column;
}

Номер телефона и адрес почты можешь реализовать через p или a. А отступы слева / справа / сверху через классы, которые присвой элементам с телефоном и почтой.

Или покажи пример своего кода, в котором не получается — так будет проще помочь.

Comments

[bpGusar]

я оставил ссылку на страницу где эти карточки есть

[Александр]

Павел Бондаренко, добавь

.contacts__person .person__item.proect1 {
  align-items: flex-start;
}

Всё будет нормально, но тогда всё упрётся в то, что у тебя разная высота блоков .prof

[bpGusar]

Александр Тимощук, чет не выходит ничего, получается вообще не так как на скрине

[Александр]

Павел Бондаренко, потому что дальше придется ручками задавать отступы нужным элементам, как мне кажется. Посмотри на скрин, в идентичных блоках с заголовком в 2 строки разные отступы указаны. Это уже к дизайнеру вопрос, зачем так было позиционировать.

[bpGusar]

Александр Тимощук, да дизайнеру по*****, он нарисовал а как это сделать не его дело как он говорит

[Александр]

Павел Бондаренко, тогда присвой нужному элементу отдельный класс (или через nth-child реализуй) и подвинь его.

[bpGusar]

Александр Тимощук, так нельзя, каждая карточка генерируется а сверху есть селект для выборки

[Александр]

Павел Бондаренко, в качестве идеи: самый большой заголовок карточки у тебя в 5 строчек. Задай стили для других карточек, чтобы они были такого же размера, как и карточка с заголовком в 5 строчек и тогда всё остальное стилизовать будет проще.

Answer 2

[Ankhena]

Как-то так: https://jsfiddle.net/ucu5hkj5/ если именно флексом.
Если e-mail не будет помещаться на одну строчку, то идея дизайнера рассыплется, но это проблемы дизайнера. Либо обрезать его с помощью text-overflow. Либо изменять размер шрифта e-mail'а, так, чтобы всегда влезал в 1 строчку, тогда можно избавиться от min-height, но прибавится js.

Comments

[Ankhena]

Ну и чтобы space-between работал при не кратном 4м количеством блоков, надо добавить пустые, но обычная практика.