Проблема в том, что данные которые находятся внутри блока(имя, проф. и тп. ) меняются и их длина тоже, и тогда все блоки криво расположены . Делал с помощью flex.
Вот:
Для начала решите какого результата вы хотите если в этой таблице одновременно будут Константин Константинопольский и Ян Ли. Может и не нужно метки пытаться выравнивать?
Нач. программист, будущий фрилансер и бизнесмен :D
Советую вам сверстать это не на flex, а на табличной вёрстке! Каждый элемент или же блок, поместить в ячейку. А уже относительно ячеек можно flex расположить элементы по горизонтали как вам нужно.
Ещё необходимо убрать границы ячеек (border: none) или же сделать их невидимыми (border-color: transparent;).
Погуглите на этот счёт, если не знакомы с таблицами.
Иван Мехедов, зачем это верстать таблицей, когда можно сверстать проще используя flex? В данном случае табличная верстка - это лишь лишние хлопоты, плюс к сложности кода и плюс ко времени загрузки страницы
Danny Arty, на счёт flex - годная штука. Пользуюсь всегда ею. Но когда есть вопрос точного нестандартного расположения, то я применяю margin или таблицы. Здесь последнее классно подходит! Как бы вы применили здесь flex для точного расположения элементов, я не представляю. Либо вы не поняли задание/вопрос, либо я не знаю flex. Но последнее крайне вряд ли. 90%+ свойств flex я знаю. Под данную задачу я не вижу решение flex-ом.
Не вижу никаких хлопот и сложностей. И таблицы не так долго загружаются, как кажется.
Предложите альтернативу! Как бы вы тогда стилизовали эти блоки?
Есть ещё одно решение! position: absolute и расположить в процентах left. Но погодите-ка, там все равно придется очень часто менять left в media. Так что, по-моему, таблицами тут верстать само лучшее решение.
Иван Мехедов, задал бы строгую ширину в процентах каждому блоку, вместо использования justify-content и flex-grow, дальше уже дело в адаптивности, то бишь как автор хочет чтобы этот блок выглядел на мобильном экране. Хотя возможно вы правы, сверстать таблицей все таки в данном случае будет легче
Простой
