我试图制作一个侧边栏,在顶部有一个下拉选项,然后是我的导航,然后在导航的底部有一些控件:

期望的结果

-我的下拉菜单
-我的主要导航
-导航项目
-导航项目

-空间
-空间

-我的控件
-控制
-控制

当前成果

-我的下拉菜单
-我的主要导航
-导航项目
-导航项目
-我的控制
-控制
-控制

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中就会有两个元素,而不是三个,因此,使用空格可以轻松实现目标。

07-24 09:46
查看更多