помогите решить дилемму по верстке

Question

пришел макет = дикая дизмораль, тк сразу возникли проблемы с реализацией меню , самым первым элементом на странице, ситуация следующая: есть меню с 5 айтемами, которые расположены по центру страницы, и при растягивании страницы меню остается по центру , НО сбоку меню есть кнопка которая обтекает меню и сама кнопка растягивается во всю ширину окна браузера справа от меню , а само меню остается по центру и при растяжении окна браузера слева остается пустая область.

пробовал реализовать флексами и для той самой кнопки задал flex: 1 0; чтобы она занимала всю оставшуюся ширину сбоку, но получилось так что меню в итоге прилипло к левому краю,как подобное реализуется , можно просто словами сказать , спасибо!

Answer 1

Используй медиа запросы, и установи flex-shrink для каждого элемента отдельно на каждый вьюпорт

Answer 2

получилось реализовать пустым блоком слева , которому я тоже задал flex: 1 0;

<div class="wrapper">
  <div class="center"></div>
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">button</div>
</div>



.wrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.item{
  margin-right: 10px;
    background: blue;
  padding: 10px;
  min-width: 100px;
}
.item:last-of-type{
  margin-right: 0;
  background: red;
}
.item1{
  flex-shrink: 1;
}
.item2{
  flex-shrink: 2;
}
.item3{
  flex-shrink: 3;
}

.item4{
  flex-shrink: 4;
}
.item5{
  flex-shrink: 0;
  flex: 1 0;
}
.center{
  flex: 1 0;
}

БЛОГ НА HUSL

помогите решить дилемму по верстке

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