yaleksandr89
@yaleksandr89
PHP developer

Почему сбивается центрирование двух блоков(flex)?

Здравствуйте.
Верстаю меню, возникла проблема на этапе добавления адаптива этому элементу. Есть несколько брекпойнов на котором меню "ужимается" в зависимости от размера экрана и при этом центрирование работает:
5df019737ec80378723296.png

Но при переходе на брекпойнт 768, происходит значительное изменение. На картинке выше есть два "глобальных" блока - логотип и меню + информация. На 768 меню скрывается (display: none) остается только блок с информацией и ему дается свойство:
.topLine nav .item-2 .row ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: start;
    align-items: flex-start;
  }

  .topLine nav .item-2 .row .info {
    margin-bottom: 0;
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    align-content: space-evenly;
  }

А блокам вложенным в него
.topLine nav .item-2 .row .info__phone,
  .topLine nav .item-2 .row .info__watch,
  .topLine nav .item-2 .row .info__email,
  .topLine nav .item-2 .row .info__address {
    -webkit-box-flex: 50%;
    flex: 50%;
  }

Что бы они перестроиль 2 ряда. Но при этом сбивается центрирование:
5df01aa45946e460554089.png

На скрине постарался показать, что центровка сбивается не у "глобальных" блоков (лого и меню/инфо), а у вложенных элементов блока .info (их прибивает к верху). Пытался блоку .info дать свойство justify-content: center (так как элементы вместо row стали column и основная и поперечная ось изменились), но че-т не взлетело :(

Понимаю, что где-то напутал с флексами (вертикальным выравниванием, но не могу сообразить где именно. Выложил кусок в песочнице.
  • Вопрос задан
  • 54 просмотра
Решения вопроса 1
l3ftoverz
@l3ftoverz Куратор тега CSS
Люблю Финский металкор и ищу работу.
Если тебе нужно выровнять по-горизонтали то, что в li: https://jsfiddle.net/mer8qykb/2/
Ещё у тебя много одинаковых классов, стилизующих before, меняется только фон, это то самое место, где нужно не дублировать код, а использовать модификаторы, раз уже там БЭМ.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы