使用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（{ {1}}）然后使用.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; }