使用 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）并排，则需要在父元素（.header）上设置display: flex，然后播放使用flex 属性可以根据需要扩展或缩小它们。

这可能更接近您想要实现的目标。检查 cmets 以了解代码在做什么，然后将鼠标悬停在菜单上以不同颜色突出显示相关元素：

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>