时间戳

首页 > 解决方案 > 在弹性框中将边距设置为自动

css - 在弹性框中将边距设置为自动

问题描述

我按照 youtube链接上的教程进行操作，但我被困在这部分中，该部分margin-top: auto在 flexbox 中使用以将最后一个孩子推到底部。你能指出什么在这里不起作用吗？

.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>

标签： cssflexbox

解决方案

你应该height: 100%;添加

.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>

推荐阅读