Css 对齐<；span>；使用Flexbox将其添加到列表项的底部

我有一个导航项目的水平列表，每个导航项目可以有一个“小文本”区域和一个“大”文本区域，使用

标记。例如，最终结果应该如下所示：

请注意，最后一个导航项没有“小文本”部分，它与导航的底部区域对齐。目前，我的代码如下所示：

导航.scss

.nav {
    align-items: center;
    display: flex;
    height: 100%;
    margin-left: 5em;

    ul {
        display: flex;
        flex-direction: row;
        margin-top: auto;

        li {
            cursor: pointer;
            display: flex;
            flex-direction: column;
            height: 65px;
            list-style: none;
            margin: .25em;
            margin-bottom: auto;
            padding: .65em 1.5em 1.5em 1.5em;
            position: relative;
            text-align: left;
            white-space: nowrap;

            span:first-child {
                font-size: .75em;
                font-weight: 500;
                text-transform: uppercase;
            }

            span:nth-child(2) {
                font-size: 1.15em;
                font-weight: 600;
                margin-top: auto;
            }
        }
    }
}

navigation.html

<div class="nav">
    <ul>
        <li>
            <span>Nav Item</span>
            <span>NUMBER ONE</span>
        </li>
        <li>
            <span>Nav Item</span>
            <span>NUMBER TWO</span>
        </li>
        <li>
            <span></span>
            <span>NUMBER THREE</span>
        </li>
    </ul>
</div>

导航项目
头号人物


导航项目
二号


三号

使用此代码时，最后一个导航项“3号”与其他两个导航项中的底部文本不对齐。它将其与

项的中间或顶部对齐。我试着使用via

flex-end

对齐，但没有奏效。最终目标是将第二个

标记与底部对齐，以便与其他导航项对齐。有没有人知道如何在Angular应用程序中使用flexbox与SASS（SCSS）对齐

---

谢谢。

在第二个子

span

选择器中添加了

显示：块

和

页边距顶部：自动

：

span:nth-child(2) {
    display: block;
    font-size: 1.15em;
    font-weight: 600;
    margin-top: auto;
}

---

这就成功了。

在第二个子

span

选择器中添加了一个

display:block

和一个

margin top:auto

：

span:nth-child(2) {
    display: block;
    font-size: 1.15em;
    font-weight: 600;
    margin-top: auto;
}

---

这就成功了。

你不需要你的

li

成为flexbox。两个

span

都应该是

display:block

，具有指定的高度。如果未指定元素的高度，且该元素没有内容，则该元素将折叠。如果你提供了一个JSFIDLE或类似的工具，我可以给出一个例子。你发布的代码已经达到了你的目标：（我只编译了CSS。）@Michael_B，你是对的，JSFIDLE显示了我预期的效果，但我的角度实现看起来仍然不正确。太奇怪了。尽管如此，我知道我走在正确的轨道上。你不需要你的

li

成为flexbox。两个

span

都应该是

display:block

，具有指定的高度。如果未指定元素的高度，且该元素没有内容，则该元素将折叠。如果你提供了一个JSFIDLE或类似的工具，我可以给出一个例子。你发布的代码已经达到了你的目标：（我只编译了CSS。）@Michael_B，你是对的，JSFIDLE显示了我预期的效果，但我的角度实现看起来仍然不正确。太奇怪了。尽管如此，我知道我走上了正确的道路。