Как сверстать следующий блок адаптивно??

Question

[Даниил Вершинин]

Голову ломаю, как сверстать следующий блок:



Есть варианты, где
1. before и after - текст
2. Фиксированная верстка под разные расширения

Подскажите плиииз))

Comments

[Александр Лысенко]

Вы сперва определитесь как блок должен выглядеть при разных размерах экрана, а уже потом подбирайте метод. Навскидку, flex идеально подойдет.

[Hyubert]

flexbox + border + after

когда перестанет помещаться, перевертайте ось flexbox

Answer 1

[Иван]

Об это должен был подумать дизайнер

Comments

[Владимир]

Как показывает практика дизайнер засунет блок в слайдер на мобильной версии

[Даниил Вершинин]

Владимир: в него еще текст с кнопкой

Answer 2

[Сергей]

Я бы убрал горизонтальные полоски, а в элементах шли Иконка + снизу текст .
before и after не используйте для текста, это тупость... потом редактировать очень сложно будет, особенно если это на движке реализовать.

Answer 3

[Максим]

Почему бы и не псевдоэлементами?.. Они могут брать контент из дата-атрибутов, редактировать будет удобно, вполне нормальное решение.
Я бы сделал в виде иконок с размерами и отступами в em или rem, в адаптиве размеры будут меняться. Полукруги и линии между иконками - border и after, например.

Answer 4

[GEEKname]

Отпозиционируйте элементы абсолютно. А контейнеру естественно задайте relative