Как разделить блочные элементы со свойством display: flex

Question

Как разделить блочные элементы со свойством display: flex

Рейтинг: 0Ответов: 0Опубликовано: 16.05.2023

Нужно разместить div: row и nav в разные строки. Код выгдядит так:

  body {
  margin: 0;
  overflow-x: hidden;
}

.footer {
  width: 100%;
  background: #000;
  padding: 30px 0px;
  font-family: 'Play', sans-serif;
  text-align: center;
  align-item: center;
  height: 65px;
  display: flex;
  flex-direction: row;
}

.topic,
row {
  width: 100%;
  margin-bottom: 10px;
}

.footer .row {
  width: 100%;
  margin: 1% 0%;
  padding: 0.6% 0%;
  color: gray;
  font-size: 0.8em;
}

.footer .nav {
  width: 100%;
  margin: 1% 0%;
  padding: 0.6% 0%;
  color: gray;
  font-size: 0.8em;
}

.footer .row a {
  text-decoration: none;
  color: gray;
  transition: 0.5s;
}

.footer .nav a {
  text-decoration: none;
  color: gray;
  transition: 0.5s;
}

.footer .row a:hover {
  color: #fff;
}

.footer .nav a:hover {
  color: #fff;
}

.footer .nav ul {
  width: 100%;
}

.footer .nav ul li {
  display: inline-block;
  margin: 0px 30px;
}

.footer .row a i {
  font-size: 2em;
  margin: 0% 1%;
}

@media (max-width:720px) {
  .footer {
    text-align: left;
    padding: 5%;
  }
  .footer .nav ul li {
    display: block;
    margin: 10px 0px;
    text-align: left;
  }
  .footer .row a i {
    margin: 0% 3%;
  }

<body>
  <footer>
    <div class="footer">
      <div class="row">
        <a href=" "><i class="fa fa-instagram"></i></a>
        <div class="topic">Instagram</div>
      </div>
      <div class="row">
        <a href="mailto: "><i class="fa fa-envelope"></i></a>
        <div class="topic">Email</div>
      </div>
      <div class="row">
        <a href="tel:"><i class="fa fa-phone"></i></a>
        <div class="topic">Телефон</div>
      </div>
      <div class="nav">
        <ul>
          <li><a href="">Название</a></li>
          <li><a href="">Название</a></li>
          <li><a href="">Название</a></li>
        </ul>
      </div>
  </footer>
</body>

css html

Источник: Stack Overflow на русском

Как разделить блочные элементы со свойством display: flex

Ответы