В процессе работы с веб-разметкой и стилизацией часто возникает необходимость выравнивания элемента по правому краю контейнера. Рассмотрим пример с использованием Flexbox модели.
Представим, что имеется горизонтальное меню с тремя пунктами: «Home», «Some title centered», «Contact». Цель — расположить пункт «Contact» по правому краю меню.
<div class="menu">
<div class="item">Home</div>
<div class="item">Some title centered</div>
<div class="item">Contact</div>
</div>
.menu {
display: flex;
}
.item {
background: #efefef;
border: 1px solid #999;
padding: 10px;
}
Простое применение display: flex к контейнеру располагает все элементы слева направо. Однако, чтобы выровнять последний пункт «Contact» по правому краю, необходимо использовать дополнительные свойства Flexbox.
Одним из самых простых способов является использование свойства margin-left: auto для пункта «Contact». Это свойство «оттолкнет» пункт «Contact» от остальных элементов и выровняет его по правому краю.
.item:last-child {
margin-left: auto;
}
Таким образом, вместо использования position: absolute и right: 0, можно использовать возможности Flexbox для выравнивания элементов. Это делает код более понятным, упрощает поддержку и делает верстку более гибкой.
Добавить комментарий