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

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

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;
}
  • Вопрос задан
  • 263 просмотра
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 2
@Jumandjilos
лучше задай гамбургеру postion:absolute, ну и спозиционируй его нормально
Ответ написан
5 комментариев
5 комментариев
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;
}
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ответы на вопрос 2
Hitrou
@Hitrou
Начинающий программист)
Не очень интеллектуальное, но быстрое решение: просто добавь невидимые блоки.
Ответ написан
1 комментарий
1 комментарий
Krasnodar_etc
@Krasnodar_etc
avito front
Для гамбургера margin-left: auto; не?
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Взлом автомобильной программы
19 апр. 2024, в 05:01
999999 руб./за проект
Доработать телеграм бота
19 апр. 2024, в 03:52
1000 руб./за проект
Написать код на python
19 апр. 2024, в 03:01
1000 руб./за проект
Ещё заказы