Используя flexbox как сделать подбор ширины ячеек как в таблице?

Question

[Дмитрий Страджу]

Добрый день. Понадобилось переверстать таблицу (использовал display: table, table-row и table-cell) на display: flex. И тут возникла проблема - мне нравиться таблица, тем что браузер смотрит все строки таблицы и подгоняет ширину ячеек каждой строки нужным образом, т.е. выравнивает контент по столбцам. А если использовать flex, то получается каждая строка выравнивает свои внутренние блоки независимо от другой строки - и это получается явно не таблица.

Как вариант, можно width задать в процентах, а min-width и max-width в пикселах. Становиться гораздо лучше. Уже похоже на таблицу, но все равно нету главного преимущества таблицы - подбор ширины ячейки и распределения пустого места исходя из контента(!), а не просто жесткими рамками width. Может я что-то не прописал или не правильно разметил?

Ссылка на печосницу: codepen.io/dimm/pen/VaOXPG
Спасибо.

Comments

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

Использовать таблицу.

Answer 1

[Николай]

Если уж делать таблицу через display: flex - то флоу должен быть по столбцам. Т.е. столбец для первой колонки стоблец для второй и для третьей. Тогда получится то, что вы хотите сделать.