我在youtube链接上跟随教程，但我陷入了这个部分，那就是在flexbox中使用margin-top:auto将最后一个孩子推到底部。你能指出这里什么不起作用吗？
null
.navbar {
width: 5rem;
height: 100vh;
position: fixed;
background-color: var(--bg-primary);
}
.navbar-nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.nav-item:last-child {
margin-top: auto;
}<nav class="navbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="" >
<span class="link-text">Cats</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="" >
<span class="link-text">Cats</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="" >
<span class="link-text">Cats</span>
</a>
</li>
</ul>
</nav>null
您应该添加height:100%；
null
.navbar {
width: 5rem;
height: 100%;
position: fixed;
background-color: var(--bg-primary);
}
.navbar-nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
height:100%;
}
.nav-item:last-child {
margin-top: auto;
}<nav class="navbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="" >
<span class="link-text">Cats</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="" >
<span class="link-text">Cats</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="" >
<span class="link-text">Cats</span>
</a>
</li>
</ul>
</nav>
这按预期工作，最后一个被推到父项的底部，但是由于父项(.navbar-nav)具有相同的高度，所以您看不到元素移动。
增加.navbar-nav高度将使下移:
.navbar-nav {
...
height: 100vh;
}
null
.navbar {
width: 5rem;
height: 100vh;
position: fixed;
background-color: var(--bg-primary);
}
.navbar-nav {
height: 100vh;
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.nav-item:last-child {
margin-top: auto;
}<nav class="navbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="" >
<span class="link-text">Cats</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="" >
<span class="link-text">Cats</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="" >
<span class="link-text">Cats</span>
</a>
</li>
</ul>
</nav>
将100VH的高度设置为.navbar-nav后，您可以在第二个孩子上使用flex:1来确保它占用周围的空闲空间。这会自动将最后一个孩子推到底部。在这种情况下，您甚至不需要费心使用margin的将元素放在flex-container中的不同位置。flexbox属性和flex-item属性负责定位我们的flex-items。
代码修改:
.navbar-nav{
height:100vh;
}
.nav-item:nth-child(2) {
flex:1;
}
**
null
.navbar {
width: 5rem;
height: 100vh;
position: fixed;
background-color: teal;
}
.navbar-nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
height:100vh;
}
.nav-item:nth-child(2) {
flex:1;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<nav class="navbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="" >
<span class="link-text">Cats</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="" >
<span class="link-text">Cats</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="" >
<span class="link-text">Cats</span>
</a>
</li>
</ul>
</nav>
</body>
</html>