У меня есть горизонтальный список для элементов навигации, и каждый элемент навигации может иметь область «маленький текст» и «большую» область текста, используя теги <span>. Так, например, конечный результат должен выглядеть следующим образом:
Обратите внимание, что последний элемент навигации не имеет раздела «маленький текст» и выравнивается по нижним областям навигации. В настоящее время мой код выглядит так:
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>
С этим кодом последний элемент навигации «НОМЕР ТРИ» не выравнивается с нижним текстом в двух других элементах навигации. Он выравнивает его либо по середине, либо по верху элемента <li>. Я попытался использовать выравнивание по flex-end, и это не сработало. Конечная цель - выровнять второй тег <span> по низу, чтобы он совпал с другими элементами навигации. Кто-нибудь есть какие-либо идеи о том, как выровнять Я использую flexbox с SASS (SCSS) в приложении Angular.
Спасибо.