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

Question

[Shadowman69]

Подскажите пожалуйста, как выровнять эти два элемента по главной оси, так чтоб логотип остался по центру, а гамбургер-иконка пошла направо (смотрите на верхний прямоугольник). Верстаю на флексбоксах, направление в этом элементе - 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;
}

Answer 1

[Jumandjilos]

лучше задай гамбургеру postion:absolute, ну и спозиционируй его нормально

Comments

[Shadowman69]

Да, видимо придется так и сделать, ибо уже по всякому пробовал и толку. Спасибо.

[Jumandjilos]

Shadowman69, это по мне самый нормальный способ, я всегда именно так делаю, хотя можно и через псевдоклассы заморочиться

[Shadowman69]

Согласен, просто не хочу привыкать к абсолютам, стараюсь использовать их только крайней нужде, я видел в некоторых людей каждый второй блок через абсолют сделано - аж мороз по коже пошел от такого извращения)

[Jumandjilos]

Shadowman69, ну да, это перебор уже)

[profesor08]

Flex призван решать такие задачи, но вы все равно ищете способ поговнокодить. Более того распространяете этот подход в массы. Разве так сложно обернуть лого в блок и задать ему flex: 1 0 auto, чтоб он занят все доступное пространство и уже относительно него отцентрировать лого?

Answer 2

[profesor08]

Ты неправильно проектируешь блок. Отсюда у тебя проблемы для решения которых и создан 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;
}

Comments

[Odisseya]

Если стоит задача центровать лого относительно родителя (.logo_container), а не выделенного под лого доступного пространства (flex: 1 0 auto), то ваш способ не подходит, либо требует костыля. Т.к. при центровке лого должно учитываться пространство занятое гамбургером.

Answer 3

[Aleksandr Sechko]

Не очень интеллектуальное, но быстрое решение: просто добавь невидимые блоки.

Comments

[Shadowman69]

Эффект будет такой же, как добавить марджины - лого и гамбургер разьедуться, а лого мне нужен по центру.

Answer 4

[Егор Живагин]

Для гамбургера margin-left: auto; не?

Comments

[Shadowman69]

Нет, разьехались, лого налево, гамбургер направо)