我试图制作一个侧边栏,在顶部有一个下拉选项,然后是我的导航,然后在导航的底部有一些控件:
期望的结果
-我的下拉菜单
-我的主要导航
-导航项目
-导航项目
-空间
-空间
-我的控件
-控制
-控制
当前成果
-我的下拉菜单
-我的主要导航
-导航项目
-导航项目
-我的控制
-控制
-控制
SCSS
.nav-container {
height: 100vh;
background-color: #111720;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-items: flex-start;
justify-content: flex-start;
.nav {
width: 100%;
h2 {
color: #fff;
margin: 20px 10px;
font-size: 18px;
font-weight: 400;
}
&.bottom {
align-self: flex-end;
}
.nav-list {
list-style: none;
padding: 0;
width: 100%;
.menu-divider{
margin-left: 20px;
border: 0;
border-top: 1px solid rgba(236, 237, 239, 0.1);
}
.nav-list-item {
width: 90%;
padding-left: 10%;
color: $text-color-light;
font-size: 15px;
height: 50px;
line-height: 50px;
&.active {
border-left: 5px solid $text-color-blue;
color: $text-color-blue;
padding-left: calc(10% - 5px);
a {
color: $text-color-blue;
}
}
&:hover {
border-left: 5px solid $text-color-blue;
padding-left: calc(10% - 5px);
transition: all 0.2s ease-in-out;
}
img {
margin-right: 20px;
width: 18px;
}
a {
color: #fff;
&:hover {
color: $text-color-blue;
transition: all 0.2s ease-in-out;
cursor: pointer;
}
}
.inline {
display: inline-block;
vertical-align: middle;
}
}
}
}
.dropdown-container {
ul {
list-style: none;
margin-bottom: 0;
}
li {
&.selected
{
color: white !important;
}
&:hover {
border-left: 5px solid #111720 !important;
}
}
}
}
HTML示例
<section class="nav-container">
<div class="dropdown-container">
<ul>
<li class="selected">
DROPDOWN WILL BE HERE
</li>
</ul>
</div>
<div class="nav top">
<ul class="nav-list">
<li class="nav-list-item">
<a><span class="inline">Nav Item 1</span></a>
</li>
<li class="nav-list-item">
<a><span class="inline">Nav Item 1</span></a>
</li>
</ul>
</div>
<div class="nav bottom">
<ul class="nav-list">
<li class="nav-list-item">
<a><span class="inline">Nav Item 1</span></a>
</li>
<li class="nav-list-item">
<a><span class="inline">Nav Item 1</span></a>
</li>
</ul>
</div>
</section>
关于如何解决这个问题有什么建议吗?我尝试了flex:主导航上的1 1 auto。
我也尝试过自辩底等
如果我用介于两者之间的空格来证明项目是对的,那么它更接近于正确,但是我不希望项目1和2之间的空格。
最佳答案
首先,您的示例scss代码不完整,因此我为您的颜色变量添加了一些随机值。我还缩短了html代码,因此真正的问题更加明显。
您要做的是将弹性盒中的第三个元素(nav.bottom)对准底部,而其他两个容器(.dropdown-container和nav.top)则保持在顶部。结果,它们之间的空间将伸展,因此弹性盒将始终具有与屏幕相同的高度。我对吗?
如果是这样,则此代码在这里&.bottom {align-self: flex-end;}
因为弹性盒的方向是列而不是行,所以无法使用。
在这种情况下,align
负责水平对齐,而justify
负责垂直对齐项目。
(使用flex-direction: row
则相反。)
但是,您不能仅用justify-self替换align-self,因为在flex-box容器中将忽略此属性。相反,您可以将底部导航设置为拉伸,而其他两个元素保持其自然高度。为了使导航位于底部,您还可以将底部容器也设置为弹性框,并使用justify-content将列表与底部对齐。
看起来像这样:HTML
<div class="main">
<section class="nav-container">
<div class="dropdown-container">
...DROPDOWN WILL BE HERE...
</div>
<!-- using the nav element here instead of div for better semantics -->
<nav class="top">
<ul>
...top nav...
</ul>
top nav
</nav>
<nav class="bottom">
<ul>
...bottom nav...
</ul>
</nav>
</section>
</div>
SCSS
$text-color-blue: skyblue;
$text-color-light: #ddd;
.nav-container {
height: 100vh;
background-color: #111720;
display: flex;
flex-flow: column nowrap;
align-items: flex-start;
justify-content: flex-start;
.dropdown-container {
flex: 0 0 auto;
}
nav {
width: 100%;
&.top {
flex: 0 0 auto;
}
&.bottom {
flex: 1 1 auto;
display: flex;
flex-flow: column nowrap;
justify-content: flex-end;
}
}
}
当然,根据您的确切要求,还有更多解决方案。例如,您还可以将下拉列表和顶部导航分组到div元素中。这样,您的flex-box中就会有两个元素,而不是三个,因此,使用空格可以轻松实现目标。