我创建了一个菜单栏，并将其设置为flexbox。但是，我正在尝试将汉堡区域设置为最右侧。我正在使用align-self：flex-end，它不起作用。我有什么想念的吗？
这是我的html：-
<div class="nav-container">
<h3>DAY/NIGHT</h6>
<div class="burger-container">
<div class="burger"></div>
<div class="burger"></div>
<div class="burger"></div>
</div>
</div>
Sass代码：-
.nav-container {
width: 100vw;
box-sizing: border-box;
padding: 30px $padding-item-position;
position: fixed;
top: 0;
left: 0;
z-index: 2;
background: $dark-mode-menu;
display: flex;
flex-direction: row;
h3 {
margin: 0;
font-size: 40px;
line-height: 30px;
}
.burger-container {
height: 34px;
width: 34px;
background: red;
align-self: flex-end;
}
}
我拿走了您的代码，并通过两个不同的选项实现了结果：
左边距
.burger-container {
height: 34px;
width: 34px;
background: red;
margin-left: auto;
}
flex-direction：列
.nav-container {
flex-direction: column;
// Other css directives
如果您的flex方向是row，则flex-end会将其发送到最后一行afaik。flex direction列将其发送到最后一列。否则，margin-left将始终自动填充左侧边距并将其“推入”右侧
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句