Выравнивание по флексбоксу

Рейтинг: 0Ответов: 1Опубликовано: 06.04.2023

Существует мобайл-версия шапки следующего вида:

<header class="header">                   // .header {display: flex}
    <div class="header__logo"></div>
    <div class="header__burger"></div>
</header>

Подскажите пожалуйста, как отцентрировать блоки так, чтобы лого было ровно по-центру, а бургер-меню было прижато к краю блока <header>. Разумеется, можно абсолютно позиционировать дивы, но хочется использовать исключительно flexbox технологию

css html adaptive-design flexbox бэм
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Такой вариант придумал). А ту ссылку я не нашёл.

div {
  box-sizing: border-box;
  display: block;
}
.header {
  display: flex;
  justify-content: center;
  align-items: center;
}
.header__logo {
  width: 200px;
  height: 70px;
  background: green;
  margin: auto;
}
.header:before {
  content: '';
  display: block;
  width: 70px;
}
.header__burger {
  width: 70px;
  height: 70px;
  background: red;
}
<header class="header">
    <div class="header__logo"></div>
    <div class="header__burger"></div>
</header>