0

как правильно выровнять отдельный элемент, когда он находится во флекс-контейнере? У меня есть 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>

введите сюда описание изображения

1 ответ 1

1

Объедините desc и logo в один div и потом позиционируйте уже desc относительно logo.

<div class="top-content">
    <div class="logo">
        <a href="#">
            <h2>сияние</h2>
            <span>декор центр</span>
        </a>
    </div>
    <div class="desc">
        <p>Интернет-магазин отделочных материалов и дизайна.</p>
    </div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.