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

如果希望移动包装器中的项目之间有更多空间，则需要设置其height属性。

display: flex; justify-items: space-between;似乎可以在mobile-nav上使用，因为mobile-nav是一个div，它是一个块级元素，因此默认宽度为100％，默认的flex-direction为row。

我在下面附上了您的代码段，以移动包装器的高度设置为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 -->

（我注意到，在您的帖子和答案中运行摘录时，它们在小窗口中看起来相同，如果单击整页，您会看到不同之处）

Flex元素无效。我该如何解决我的代码来解决该问题？

1 个答案: