stepanpr
@stepanpr
Верстка, Fron-end

Flex — выравнивание. Как добиться одинакового результата в обоих flex-контейнерах?

Столкнулся с проблемой выравнивания flex-элементов на десктопной версии:
https://stepanpr.github.io/rostelecom_flex/
Есть два горизонтальных flex-контейнера, по три flex-элемента в каждом.
Задаю всем элементам одинаковый flex-basis минус отступ справа:
calc(25% - 20px) + calc(25% - 20px) + calc(50% - 20px)
и
calc(50% - 20px) + calc(25% - 20px) + calc(50% - 20px)

При загрузке страницы, элементы не выглядят одинаково отцентрированными. А именно, первый элемент второго контейнера смещен влево. Подскажите пожалуйста что не так?
  • Вопрос задан
  • 188 просмотров
Решения вопроса 2
sharomet
@sharomet
Front-End
Потому что в первом контейнере у вас первые 2 элемента по 25% + отступ 20px справа.
А во втором контейнере первый элемент занимает 50% но у него отсутствуют первые 20px.
Получается
(25% + 20px-отступ) + (25% + 20px-отступ)
(50% + 20px-отступ)
Там короче выпадает 10px.
Вы не правильно построили структуру. Посмотрите как это делает например bootstrap 4
https://getbootstrap.com/docs/4.4/layout/grid/
А вообще я бы в этой ситуации воспользовался display:grid
Ответ написан
Использовать колонки с внутренним отступом вместо внешнего.
И не надо будет заморачиваться с calc()

Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
03 июн. 2020, в 07:06
2700 руб./за проект
03 июн. 2020, в 06:58
800 руб./в час
03 июн. 2020, в 02:34
2000 руб./за проект