Отображение элементов бок о бок с помощью Flexbox и вертикальное выравнивание их содержимого не работает

Question

Я реализовал следующее меню с помощью Flexbox:

* {
  margin: 0px;
  padding: 0px;
  font-family: '';
}

a {
  text-decoration: none;
}

nav {
  height: 70px;
  width: 100%;
  background-color: #5DA0E8;
  display: inline-block;
}

nav .header {
  font-size: 30px;
  line-height: 70px;
  color: white;
  font-family: 'Dosis';
  padding-left: 20px;
}

nav .searchbar {
  background-color: #4170A3;
  font-size: 18px;
  padding: 4px;
  border: none;
  border-radius: 5px 0px 0px 5px;
  vertical-align: super;
  color: white;
  width: 250px;
  font-family: 'Dosis';
}

input:focus {
  outline: none;
}

#search-icon {
  width: 18px;
  height: 18px;
  vertical-align: super;
  padding: 6px;
  background-color: #4170A3;
  border-radius: 0px 5px 5px 0px;
  cursor: pointer;
}

nav .flex-display {
  display: flex;
  justify-content: center;
  align-items: center;
}

<nav>
  <span class="header">PLANS DU BAC</span>
  
  <div class="flex-display">
    <input type="search" name="" value="" class="searchbar" />
    <img src="./ressources/media/search-icon.svg" alt="" id="search-icon" />
  </div>
</nav>

Я бы хотел, чтобы заголовок и окно поиска были рядом, но как-то вещь display: flex выбивает панель поиска из<div>.

Что я делаю не так?

Answer 1

Если вы хотите, чтобы заголовок (.header) и оболочка входных данных поиска (.flex-display) находились рядом, вам нужно установить display: flex для родительского элемента (.header) и затем воспроизвестисо свойством flex расширять или уменьшать их по своему желанию.

Возможно, это ближе к тому, чего вы пытаетесь достичь.Проверьте комментарии, чтобы узнать, что делает код, и наведите курсор на меню, чтобы выделить соответствующие элементы разными цветами:

body {
  margin: 0;
  font-family: monospace;
}


/*
  We want the parent element to be a flex container so that both children
  (in cyan and yellow) take over all the horitzontal space.
*/
#navigation__base {
  display: flex;
  height: 70px;
  width: 100%;
  border-bottom: 3px solid #000;
}

/*
  We want this flex element to be able to shrink or grow and to take
  the remainig space (flex: 1 1 auto).
  
  At the same time, we want it to be a flex container so that the link
  inside it takes the exact space that it needs to fit the text.
*/
#navigation__title {
  position: relative;
  flex: 1 1 auto;
  font-size: 30px;
  margin: 0;
  overflow: hidden;
  display: flex;
}

/*
  We want this to be a flex container as well so that we can vertically
  center the text without changing the line-height, as that might look
  ugly with multiline texts.
  
  At the same time, we want it to be a flex container so that we can
  vertically center the text inside it easily and without using line-height,
  which doesn't work well with multiline text.
*/
#navigation__link {
  color: #000;
  text-decoration: none;
  padding: 0 10px 0 20px;
  display: flex;
  height: 100%;
  align-items: center;
}

/*
  We want this flex element to be shrink to its minimum size to fit
  its contant and not grow to absorb any extra free space in the
  flex container (flex: 0 1 auto).
  
  At the same time, we want it to be a flex container so that we can
  easily vertically center the input inside it.
*/
#search__base {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 20px 0 10px;
}

/*
  Nothin fancy after this.
*/
#search__input {
  border: 3px solid #000;
  font-size: 18px;
  line-height: 20px;
  font-family: monospace;
  padding: 10px 50px 10px 10px;
  color: #000;
  width: 250px;
  transition: width ease-in 250ms;
}

#search__input:focus {
  outline: none;
  width: 450px;
}

#search__icon {
  position: absolute;
  width: 18px;
  height: 18px;
  top: 50%;
  right: 24px;
  transform: translate(-9px, -9px);
}

/*
  Just so that you can see the space that each element is taking.
*/
#navigation__base:hover > #navigation__title { background: cyan; }
#navigation__base:hover > #search__base { background: yellow; }
#navigation__base:hover #navigation__link { background: red; }

<header id="navigation__base">
  <h1 id="navigation__title">
    <a id="navigation__link" href="#">PLANS DU BAC</a>
  </h1>
  
  <label id="search__base">
    <input id="search__input" type="search"  />
    <img id="search__icon" src="./ressources/media/search-icon.svg" alt="" />
  </label>
</header>