Как сделать адаптивную шапку?

Question

я знаю что это довольно легко сделать, но никак не могу сделать адаптивную шапку с input, вот примерно должна выглядеть так:

Может кто-то структуру сделать? (не нужно добавлять стили такие же и иконки, просто что бы это примерно выглядело так, и при уменьшении экрана наблюдалась какая-то адаптивность)

Answer 1

body {
  margin: 0;
}
header {
  width: 100vw;
  height: 4em;
  padding: 1em;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  border: .3em solid brown;
}
.header__logo {
  width: 15em;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
}
.header__searcher {
  width: 55em;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header__searcher__input {
  width: 65%;
}
.header__searcher__input > input {
  width: 100%;
}
.header__searcher__buttons {
  width: 15%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header__searcher__buttons__button {
  width: 1em;
  height: 1em;
  background: black;
  margin-left: .5em;
}

<header>
  <div class='header__logo'>
    <span>Some logo</span>
  </div>
  <div class='header__searcher'>
    <div class='header__searcher__input'>
      <input type='search' placeholder='Поиск'>
    </div>
    <div class='header__searcher__buttons'>
      <div class='header__searcher__buttons__button'></div>
      <div class='header__searcher__buttons__button'></div>
    </div> 
  </div>
</header>

БЛОГ НА HUSL

Как сделать адаптивную шапку?

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