как правильно выровнять отдельный элемент, когда он находится во флекс-контейнере? У меня есть sidebar, внутри которого wrapper.которому задано display: flex; flex-direction: column; justify-content: space-around. Мне нужно подвинуть блок desc поближе к logo. Как правильнее будет его поднять наверх, как на макете? Я думал сделать через translateY или margin, но мне кажется это не правильно.
html,
body {
width: 100%;
height: 100%;
line-height: 1.5;
font-weight: 300;
font-family: 'Open Sans Light', arial;
}
.wrapper {
overflow-x: hidden;
}
section {
height: 100vh;
}
section.main {
margin-left: 300px;
background: #5b5858 url(../img/bg.jpg) center no-repeat;
}
.sidebar {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 310px;
background: #5b5858 url(../img/menu_bg.jpg) center no-repeat;
}
.sidebar .wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: distribute;
justify-content: space-around;
height: 100%;
padding-left: 30px;
}
.logo {
width: 245px;
height: 76px;
border: 3px solid rgba(197, 120, 64, 0.65);
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.logo h2 {
font-family: Georgia, serif;
font-size: 44px;
line-height: 15px;
font-weight: 400;
text-transform: uppercase;
color: #f4f4f4;
}
.logo span {
position: absolute;
-webkit-transform: translate(-15%, 80%);
transform: translate(-15%, 80%);
background: url(../img/menu_bg.jpg);
font-family: Georgia, serif;
padding: 0 5px;
font-size: 14.2px;
line-height: 1.2;
font-weight: 400;
text-transform: uppercase;
color: #f5f5f5;
line-height: 24px;
}
.desc {
font-size: 14px;
line-height: 20px;
font-weight: 300;
color: #aaa9a9;
}
.menu {
position: relative;
}
.menu-main {
margin-bottom: 70px;
}
.menu-main ul li:nth-child(2):before {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
content: '1';
color: #fff;
font-size: 12px;
width: 35px;
height: 35px;
background: url(../img/rectangle.svg) center no-repeat;
background-size: 80%;
float: right;
margin: 3px -5px 0 0;
}
.menu-main ul li a {
font-size: 14px;
line-height: 42px;
font-weight: 400;
text-transform: uppercase;
color: #f7f7f7;
padding-left: 30px;
}
.menu-main ul li a:hover {
color: #ff7200;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.menu-main li {
border-bottom: 1px solid #686464;
margin-left: -30px;
}
.menu-sub ul li a {
font-size: 14px;
line-height: 32px;
font-weight: 300;
color: #bdbdbd;
}
.menu-sub ul li a:hover {
color: #fff;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.contact a.phone {
display: block;
font-size: 15px;
line-height: 18px;
font-weight: 300;
text-transform: uppercase;
color: #fefefe;
}
.contact a.request {
font-size: 15px;
line-height: 28px;
text-transform: none;
color: #c57c40;
border-bottom: 1px dashed #c57c40;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.contact a.request:hover {
color: #fff;
-webkit-transition: 0.3s;
transition: 0.3s;
border-bottom: 1px solid #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/clear.css">
<link rel="stylesheet" href="css/adaptive.css">
<link href="https://allfont.ru/allfont.css?fonts=open-sans-light" rel="stylesheet">
<link href="//db.onlinewebfonts.com/c/7dca09e227fdfe16908cebb4244589e4?family=Georgia" rel="stylesheet" type="text/css"/>
<link href="owl.carousel.min.css" rel="stylesheet" type="text/css" />
<script src="js/script.js"></script>
<script src="owl.carousel.min.js" type="text/javascript"></script>
<title>Сияние - Декор центр</title>
</head>
<body>
<div class="wrapper">
<div class="sidebar">
<div class="wrapper">
<div class="logo">
<a href="#">
<h2>сияние</h2>
<span>декор центр</span>
</a>
</div>
<div class="desc">
<p>Интернет-магазин отделочных материалов и дизайна.</p>
</div>
<div class="menu">
<div class="menu-main">
<ul>
<li><a href="#">каталог товаров</a></li>
<li><a href="#">новости и акции</a></li>
<li><a href="#">наши услуги</a></li>
<li><a href="#">портфолио</a></li>
<li><a href="#">блог</a></li>
<li><a href="">контакты</a></li>
</ul>
</div>
<div class="menu-sub">
<ul>
<li><a href="#">О компании</a></li>
<li><a href="#">Отзывы о нас</a></li>
<li><a href="#">Доставка и оплата</a></li>
<li><a href="#">Дизайнеры</a></li>
</ul>
</div>
</div>
<div class="contact">
<a href="tel:+78005118909" class="phone">+7 (4822) 648-080</a>
<a href="#" class="request">Заказать звонок</a>
</div>
</div>
</div>
<div class="content">
<section class="main">
</section>
</div>
</div>
</body>
</html>