Размещение элементов внутри блока?

Question

[SeniorScript]

Здравствуйте.
Вот имею такой блок:


Проблема в том, что данные которые находятся внутри блока(имя, проф. и тп. ) меняются и их длина тоже, и тогда все блоки криво расположены . Делал с помощью flex.
Вот:


Как можно это исправить?
Заранее спасибо.

Comments

[Danny Arty]

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

[Lynn «Кофеман»]

Для начала решите какого результата вы хотите если в этой таблице одновременно будут Константин Константинопольский и Ян Ли. Может и не нужно метки пытаться выравнивать?

[Lynn «Кофеман»]

Может таки достаточно имена по левому краю выровнять

[Lynn «Кофеман»]

Ну и код покажите

[Антон]

Это обычная таблица, и сделайте ее таблицей.

Answer 1

[Иван Мехедов]

Советую вам сверстать это не на flex, а на табличной вёрстке! Каждый элемент или же блок, поместить в ячейку. А уже относительно ячеек можно flex расположить элементы по горизонтали как вам нужно.

Ещё необходимо убрать границы ячеек (border: none) или же сделать их невидимыми (border-color: transparent;).

Погуглите на этот счёт, если не знакомы с таблицами.

Comments

[Иван Мехедов]

Danny Arty, то есть? Что вы имели ввиду?
Если метода не понравилась, то прошу объяснений и альтернатив.

[Danny Arty]

Иван Мехедов, зачем это верстать таблицей, когда можно сверстать проще используя flex? В данном случае табличная верстка - это лишь лишние хлопоты, плюс к сложности кода и плюс ко времени загрузки страницы

[Иван Мехедов]

Danny Arty, на счёт flex - годная штука. Пользуюсь всегда ею. Но когда есть вопрос точного нестандартного расположения, то я применяю margin или таблицы. Здесь последнее классно подходит! Как бы вы применили здесь flex для точного расположения элементов, я не представляю. Либо вы не поняли задание/вопрос, либо я не знаю flex. Но последнее крайне вряд ли. 90%+ свойств flex я знаю. Под данную задачу я не вижу решение flex-ом.

Не вижу никаких хлопот и сложностей. И таблицы не так долго загружаются, как кажется.

Предложите альтернативу! Как бы вы тогда стилизовали эти блоки?

Есть ещё одно решение! position: absolute и расположить в процентах left. Но погодите-ка, там все равно придется очень часто менять left в media. Так что, по-моему, таблицами тут верстать само лучшее решение.

[Danny Arty]

Иван Мехедов, задал бы строгую ширину в процентах каждому блоку, вместо использования justify-content и flex-grow, дальше уже дело в адаптивности, то бишь как автор хочет чтобы этот блок выглядел на мобильном экране. Хотя возможно вы правы, сверстать таблицей все таки в данном случае будет легче