Html 嵌套flexbox,对齐项目不弯曲结束
我正在尝试使用Html 嵌套flexbox,对齐项目不弯曲结束,html,css,flexbox,Html,Css,Flexbox,我正在尝试使用flex-end将导航放置在底部。 我不确定是什么原因导致它不能放在底部。我知道我可以把它放在绝对位置,尽量避免 标题{ 背景:深蓝; 显示器:flex; 填充:20px0; .header__标志{ 背景:水; 弹性:20%; 最小高度:140px; } 导航{ 背景:#111; 弹性:78%; 保险商实验室{ 列表样式:无; 保证金:0; 背景:海蓝宝石; 显示器:flex; 证明内容:柔性端; 对齐项目:柔性端; } a{ 文字装饰:无; 显示:块; 填充:1
flex-end
将导航放置在底部。
我不确定是什么原因导致它不能放在底部。我知道我可以把它放在绝对位置,尽量避免
标题{
背景:深蓝;
显示器:flex;
填充:20px0;
.header__标志{
背景:水;
弹性:20%;
最小高度:140px;
}
导航{
背景:#111;
弹性:78%;
保险商实验室{
列表样式:无;
保证金:0;
背景:海蓝宝石;
显示器:flex;
证明内容:柔性端;
对齐项目:柔性端;
}
a{
文字装饰:无;
显示:块;
填充:1em;
颜色:白色;
}
}
.搜索{
背景:#fff;
弹性:12%;
}
}
在您的代码中,您实际上没有将导航
与对齐项目:柔性端
一起放置在底部。您将列表项放在ul
的底部
除了ul
容器没有增加的高度,因此列表项不会出现在任何地方:
要底部对齐nav
,请给它一个align self:flex end
,使其在较大的flex容器内对齐
我完全错过了属性
align self:flex end代码>谢谢。nav
上的margintop:auto
也可以工作:。。。()
<header>
<div class="header__logo">
<a href=""></a>
</div>
<nav>
<ul>
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
<li><a href="#">four</a></li>
</ul>
</nav>
<div class="search"></div>
</header>
header {
background: deepskyblue;
display: flex;
padding: 20px 0;
.header__logo {
background: aqua;
flex: 20%;
min-height: 140px;
}
nav {
background: #111;
flex: 78%;
ul {
list-style: none;
margin: 0;
background: aquamarine;
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
a {
text-decoration: none;
display: block;
padding: 1em;
color: white;
}
}
.search {
background: #fff;
flex: 12%;
}
}