清晰度设计系统 - 垂直导航

Question

我在清晰度上看着垂直导航选项。我想知道是否可以正确对齐导航？

我在清晰度上使用的示例代码如下：

<div class="main-container">
<header class="header">
    ...
</header>
<div class="content-container">
    <div class="content-area">
        <router-outlet></router-outlet>
    </div>
    <clr-vertical-nav>
        <a clrVerticalNavLink routerLink="./charmander" routerLinkActive="active">Charmander</a>
        <a clrVerticalNavLink routerLink="./jigglypuff" routerLinkActive="active">Jigglypuff</a>
        <a clrVerticalNavLink routerLink="./pikachu" routerLinkActive="active">Pikachu</a>
        <a clrVerticalNavLink routerLink="./raichu" routerLinkActive="active">Raichu</a>
        <a clrVerticalNavLink routerLink="./snorlax" routerLinkActive="active">Snorlax</a>
        <a clrVerticalNavLink routerLink="./credit" routerLinkActive="active">Credit</a>
    </clr-vertical-nav>
</div>

这完美无缺，但导航与左边距对齐。有关如何将其与右边距对齐的建议吗？

Answer 1

清晰度使用flexbox order属性将side-nav左对齐

  

如果您想使side-nav右对齐，请更改negative的顺序   到positive number或zero

.sidenav{
   flex: 0 0 auto;
   order: 1;
}

或

.main-container .content-container .clr-vertical-nav, .main-container .content-container .sidenav {
   flex: 0 0 auto;
   order: 1;
}