вот что у меня есть скрипка
ul {
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: center;
width: 100%;
height: 100px;
background: #333;
padding: 15px;
}
ul li {
padding: 15px;
margin: 5px;
background: #efefef;
border: 1px solid #ccc;
display: inline-block;
list-style: none;
}
#item-1 {
height: 50px;
}
#item-2 {
height: 70px;
}
<ul>
<li id="item-1">Home</li>
<li id="item-2">Menu</li>
<li>More</li>
<li>Stuff</li>
<li>Settings</li>
</ul>
Я хочу, чтобы последний элемент внутри гибкого блока был перемещен вправо («Настройки» в моей скрипке), при этом все остальные элементы оставались такими, какие они есть. Пункт "Настройки" тоже должен быть центрирован по вертикали и все.
align-self: flex-end
толкает элемент вниз (я хочу, чтобы он находился справа).
Я бы очень предпочел решение с использованием flex-box, потому что мои элементы имеют переменную высоту и всегда должны быть центрированы по вертикали.
Как лучше всего этого добиться?
Спасибо за вашу помощь!