Гибкие элементы не работают. Как я могу исправить свой код, чтобы решить эту проблему?

Question

Почему я не могу использовать justify-content: space-between или space-around?

.mobile-page-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mobile-nav {
  display: flex;
  justify-content: space-between;
}

<div class="mobile-page-wrapper">
  <div class="mobile-nav">
    <img src="./img/mobile-nav-logo.svg" alt="LOGO" class="logo-mobile">
    <ul class="mobile-soc">
      <li><img class="mobile-fb" src="./img/Facebook.svg" alt="Facebook"></li>
      <li><img class="mobile-vk" src="./img/VK.svg" alt="Vk"></li>
      <li><img class="mobile-inst" src="./img/Instagram.svg" alt="Instagram"></li>
    </ul>
  </div>
  <!-- /.mobile-nav -->
  <div class="main-idea-mobile">
    <h1>SSDSDSDS<br>DASDASD</h1>
  </div>
  <!-- /.main-idea-mobile -->

</div>
<!-- /.mobile-page-wrapper -->

Я хотел бы использовать justify-content: space-between; с flex-direction: column, но это не работает. Пожалуйста, помогите мне решить эту проблему.

Answer 1

Если вы хотите sh, чтобы между элементами в мобильном-обертке было больше места, вам нужно установить его свойство высоты.

display: flex; justify-items: space-between;, похоже, работает на мобильном устройстве, потому что mobile- nav - это div, который является элементом уровня блока и поэтому имеет ширину по умолчанию 100%, а по умолчанию указывается flex-direction (строка).

Я прикрепил ваш фрагмент ниже с высотой mobile-wrapper, установленной в 100vh в качестве примера.

.mobile-page-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
}

.mobile-nav {
  display: flex;
  justify-content: space-between;
}

<div class="mobile-page-wrapper">
  <div class="mobile-nav">
    <img src="./img/mobile-nav-logo.svg" alt="LOGO" class="logo-mobile">
    <ul class="mobile-soc">
      <li><img class="mobile-fb" src="./img/Facebook.svg" alt="Facebook"></li>
      <li><img class="mobile-vk" src="./img/VK.svg" alt="Vk"></li>
      <li><img class="mobile-inst" src="./img/Instagram.svg" alt="Instagram"></li>
    </ul>
  </div>
  <!-- /.mobile-nav -->
  <div class="main-idea-mobile">
    <h1>SSDSDSDS<br>DASDASD</h1>
  </div>
  <!-- /.main-idea-mobile -->

</div>
<!-- /.mobile-page-wrapper -->

(Я заметил, что при запуске фрагментов из вашего поста и моего ответа они выглядят одинаково в небольшом окне, вы можете увидеть разницу, если щелкнуть полностью страница)