在Flexbox中将边距设置为自动

debugcn 发表于 Dev

double_four_time

我按照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>

0石0

这可以按预期工作，最后一个<li>被推到父级的底部，但是由于父级（.navbar-nav）具有相同的高度，因此您看不到元素在移动。

增加.navbar-nav高度将使<li>向下移动：

.navbar-nav {
    ...
    height: 100vh;
}

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。