Как расположить элементы по бокам header (как на макете)

Question

Задача: расположить эти блоки (адрес и номер телефона) по бокам header'а за краями ограничителя, как показано в макете. Кроме того, нужно сделать их адаптивными, чтобы они скрывались на маленьких экранах, где под них недостаточно места.

Я знаю, что это возможно, но не могу додуматься. Гуглить пробовал, но ничего не нашёл.

Answer 1

Как самый простой вариант - задать им абсолютное позиционирование относительно всего блока с категориями. А потом медиа-запросом прятать.

Либо, но тут не факт, надо протестить, флексами сделать блок, блоку с категориями задать ширину контейнера, а родительскому блоку justify-content: space-between. Тогда у тебя, по идеи, блок с категориями должен встать по центру, как в макете, а контакты по бокам.

Answer 2

Попробуйте этот вариант

.wrap {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
}

.left,
.right,
.center {
  height: inherit;
}

.left {
  flex: 1 1 auto;
  background-color: #937343;
}

.center {
  width: 100%;
  background-color: #647283;
  max-width: 600px;
  margin: 0 auto;
}

.right {
  flex: 1 1 auto;
  background-color: #821749;
}

@media screen and (max-width: 600px) {
  .left,
  .right {
    display: none;
  }
}

<div class="wrap">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

БЛОГ НА HUSL

Как расположить элементы по бокам header (как на макете)

Ответы (2 шт):