使用Flexbox并排显示元素，并垂直对齐其内容不起作用
使用Flexbox并排显示元素，并垂直对齐其内容不起作用
提问于 2018-05-31 05:03:18
我已经使用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>。
我做错了什么？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-05-31 05:16:18
如果您希望标题(.header)和搜索输入的包装(.flex-display)并排显示，则需要在父元素(.header)上设置display: flex，然后使用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50613329
复制相关文章
相似问题