Как мне написать на флексах адаптивный блок такой

Question

.header__search {
      background: #000;
      width:1200px;
      padding: 10px 70px;
      display: flex;
      gap: 27px;
   }

   .header__left-block {
      display: flex;
      flex-direction: column;
      gap: 10px;
   }

   .header__block-mini {
      width: 203px;
      height: 61px;
      background: #fff0cb;
   }

   .header__right-block {
      justify-content: space-evenly;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
   }

   .header__block-large {
      width: 100%;
      height: 61px;
      background: #fff0cb;
   }

   .header__block-mini-x {
      height: 61px;
      width: 179px;
      background: #fff0cb;
   }

   .header__btn-search {
      height: 61px;
      width: 247px;
      background: #ffc839;
      border: 0;
   }

<div class="header__search">
            <div class="header__left-block">
               <div class="header__block-mini"></div>
               <div class="header__block-mini"></div>
            </div>

            <div class="header__right-block">
               <div class="header__block-large"></div>
               <div class="header__block-mini-x"></div>
               <div class="header__block-mini-x"></div>
               <div class="header__block-mini-x"></div>
               <button class="header__btn-search">Search</button>
            </div>
         </div>

Знаю что можно на гридах , но гриди вроде еще не всюду поддерживаются, помогите написать на флексах адаптивный блок.

Answer 1

Чистая современная классика:

.container__left {
  display: inline-flex;
  flex-flow: column nowrap;
  width: 25%;
}

.container__left .item {
  margin: 5px;
  padding: 20px 0;
  flex: 0 1 auto;
  background: pink;
}

.container__right {
  display: inline-flex;
  flex-flow: row wrap;
  align-items: flex-start;
  width: 70%;
}

.container__right .item {
  margin: 5px;
  padding: 20px 0;
  width: calc(25% - 10px);
  flex: 0 1 auto;
  background: pink;
}

.container__right .item:nth-child(1) {
  width: 100%;
}

.container__right .item:nth-child(5) {
  background: chocolate;
}

<div class="container__left">
  <div class="item"></div>
  <div class="item"></div>
</div>

<div class="container__right">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

БЛОГ НА HUSL

Как мне написать на флексах адаптивный блок такой

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