Right-alignment of flex elements
Can you tell me how to correctly align the elements on the right edge in my example?
.header {
width: 100%;
height: 100vh;
background: url(../img/header-bg.jpg) no-repeat center center / cover;
position: relative;
z-index: 1000;
}
.header::before {
content: "";
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
position: absolute;
top: 0;
left: 0;
z-index: -1000;
}
.header__nav {
display: flex;
}
.header__menu-list {
border: 1px solid #fff;
display: flex;
flex: 1;
}
<header class="header" id="header">
<div class="container">
<nav class="header__nav">
<div class="header__logo logo">
<a href="#" class="header__logo-link">Landing Page №1</a>
</div>
<ul class="header__menu-list">
<li class="header__menu-item">
<a href="#">Услуги</a>
</li>
<li class="header__menu-item">
<a href="#">Форма</a>
</li>
<li class="header__menu-item">
<a href="#">Подвал</a>
</li>
</ul>
</nav>
</div>
</header>
0
2 answers
The horizontal alignment of the elements is done by the justify-content property.
.header {
width: 100%;
height: 100vh;
background: url(../img/header-bg.jpg) no-repeat center center / cover;
position: relative;
z-index: 1000;
}
.header::before {
content: "";
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
position: absolute;
top: 0;
left: 0;
z-index: -1000;
}
.header__nav {
display: flex;
}
.header__menu-list {
border: 1px solid #fff;
display: flex;
flex: 1;
justify-content: flex-end; // Выравнивание по правому краю
}
<header class="header" id="header">
<div class="container">
<nav class="header__nav">
<div class="header__logo logo">
<a href="#" class="header__logo-link">Landing Page №1</a>
</div>
<ul class="header__menu-list">
<li class="header__menu-item">
<a href="#">Услуги</a>
</li>
<li class="header__menu-item">
<a href="#">Форма</a>
</li>
<li class="header__menu-item">
<a href="#">Подвал</a>
</li>
</ul>
</nav>
</div>
</header>
0
Author: Gonzo, 2019-11-26 09:25:48
You have at least 2 ways: 1) Using the Bootstrap 4 class: "ml-auto" or " d-flex justify-content-end" 2) Using flex: justify-content: flex-end;
0
Author: Alexander Rasskazov, 2019-11-27 18:08:27