使用 Flexbox 将 对齐到列表项的底部答案

【问题标题】：Aligning to bottom of List Item using Flexbox使用 Flexbox 将 对齐到列表项的底部
【发布时间】：2018-12-12 02:54:54
【问题描述】：

我有一个导航项的水平列表，每个导航项可以有一个“小文本”区域和一个“大”文本区域，使用标签。因此，例如，最终结果应如下所示：

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

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

使用此代码，最后一个导航项“NUMBER THREE”与其他两个导航项的底部文本不对齐。它将它与<li> 项目的中间或顶部对齐。我尝试通过flex-end 使用对齐，但这并没有成功。最终目标是将第二个 标签与底部对齐，使其与其他导航项对齐。有没有人知道如何在 Angular 应用程序中将 flexbox 与 SASS (SCSS) 对齐。

谢谢。

【问题讨论】：

你不需要你的li 是一个弹性盒子。 span 都应该是 display:block，并具有指定的高度。如果你没有指定一个元素的高度，并且它没有内容，它就会崩溃。如果您提供 JSFiddle 或类似的，我可以展示一个示例。
您发布的代码已经达到您的目标：jsfiddle.net/2nesq1td/1（我只编译了CSS。）
@Michael_B，你是对的，JSFiddle 显示它按我的预期工作，但我的角度实现仍然看起来不正确。太奇怪了。尽管如此，我知道我在正确的轨道上。

标签： css sass flexbox

【解决方案1】：

将display: block 和margin-top: auto 添加到第二个子span 选择器：

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

成功了。

【讨论】：