@Shadowman69
Верстать или не верстать - вот в чем вопрос?

Как выровнять эти два элемента, используя флексбокс?

5af600c366b4d094156554.png
Подскажите пожалуйста, как выровнять эти два элемента по главной оси, так чтоб логотип остался по центру, а гамбургер-иконка пошла направо (смотрите на верхний прямоугольник). Верстаю на флексбоксах, направление в этом элементе - row, ширина элемента 100%, горизонтальное выравнивание по центру(но мне по центру нужен только логотип). Пробовал добавлять гамбургеру align -self: flex-end; - не слушается, марджины тоже не помогут - они разьежаются оба.
Если что,
<div class="logo_container">
        <img class="logo" src="images/blueasy_logo.png" alt="Logo"/>
         <span class="hamburger_menu">&#9776;</span>
</div>


.top_header .logo_container {
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    margin-bottom: 20px;
}
  • Вопрос задан
  • 266 просмотров
Решения вопроса 2
@Jumandjilos
лучше задай гамбургеру postion:absolute, ну и спозиционируй его нормально
Ответ написан
profesor08
@profesor08 Куратор тега CSS
Ты неправильно проектируешь блок. Отсюда у тебя проблемы для решения которых и создан flex, но ты все равно в них встрял. Так и появляются дерьмово пахнущие решения с position: absolute и тд, это касается и советчиков, ответы которых ты отметил.
<div class="logo_container">
  <div class="logo_block">
    <img class="logo" src="images/blueasy_logo.png" alt="Logo"/>
  </div>
  <span class="hamburger_menu">&#9776;</span>
</div>

.logo_container{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.logo_block{
  flex: 1 0 auto;
  display:flex;
  justify-content: center;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Hitrou
@Hitrou
Начинающий программист)
Не очень интеллектуальное, но быстрое решение: просто добавь невидимые блоки.
Ответ написан
Krasnodar_etc
@Krasnodar_etc
fundraiseup
Для гамбургера margin-left: auto; не?
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
11 окт. 2024, в 20:57
11000 руб./за проект
11 окт. 2024, в 20:49
5000 руб./за проект
11 окт. 2024, в 19:31
20000 руб./за проект