似乎不能垂直空间的项目与柔性盒。Flex:列和空间似乎不起作用。

Question

我查了一下这个问题，却没有发现什么有用的东西。使父类灵活化，然后使子flex-direction: column w/空格之间/space-均匀地工作似乎不起作用。

我在这段代码中重新创建了所有的东西，但我真的不知道如何才能使页面在空间上看起来像这样……

我遗漏了什么？

干杯!

代码：https://codepen.io/LovelyAndy/pen/LYbqzwG

​

​

HTML

<div class="welcome-page-container">
    <div class="all-els">
      <div class="text">
        <div class="t-h1">My Dad's Shit</div>
        <div class="t-h2">All this shit ain't gunna sort itself!</div>
      </div>
      <div class="btns">
        <button class="t-nav-switch">Sign In</button>
        <button class="t-nav-switch">Register</button>
      </div>
    </div>
  </div>

沙斯

.welcome-page-container
  width: 375px
  height: 812px
  border: 3px solid red
  display: flex
  justify-content: center
  align-items: center
  text-align: center
  padding-top: 3rem
  padding-left: 3rem
  padding-right: 3rem
.all-els
  display: flex
  flex-direction: column
  justify-content: space-between
  align-items: center

Answer 1

你对待受欢迎的welcome-page-container是因为它没有孩子.

Flex为他们的孩子工作。

​

​

HTML：

<div class="welcome-page-container">
<div class="all-els">
  <div class="text">
    <div class="t-h1">My Dad's Shit</div>
    <div class="t-h2">All this shit ain't gunna sort itself!</div>
  </div>
  <div class="btns">
    <button class="t-nav-switch">Sign In</button>
    <button class="t-nav-switch">Register</button>
  </div>
</div>

SASS：

  .welcome-page-container
  width: 375px
  height: 812px
  border: 3px solid red
  align-items: center
  text-align: center
  padding-top: 3rem
  padding-left: 3rem
  padding-right: 3rem
.all-els
  display: flex
  flex-direction: column
  justify-content: space-between
  align-items: center
  .text
    border: 5px solid cyan
    height: 150px
    display: flex
    flex-direction: column
    justify-content: space-evenly
  
div
  border: 2px solid lime
  
.all-els
  border: 2px solid goldenrod
  height: 100%
  display: flex
  flex-direction: column
  justify-content: space-evenly

更准确地说

下面是您希望对代码进行一些小更改的内容。我所做的唯一改变就是删除一些div并添加justify-content: space-evenly和flex-direction: column。

HTML

<div class="welcome-page-container">
    <div class="t-h1">My Dad's Shit</div>
    <div class="t-h2">All this shit ain't gunna sort itself!</div>
  <div>
    <button class="t-nav-switch">Sign In</button>
    <button class="t-nav-switch">Register</button>
  </div>

沙斯

.welcome-page-container
  width: 375px
  height: 812px
  border: 3px solid red
  display: flex
  flex-direction: column
  justify-content: space-evenly
  align-items: center
  text-align: center
  padding-top: 3rem
  padding-left: 3rem
  padding-right: 3rem
.all-els
  display: flex
  flex-direction: column
  justify-content: space-between
  align-items: center

​

​

Answer 2

它不能工作，因为.all-els没有一个height，所以它没有放置space-beetwen的位置

你可以试试

.all-els
  height: 60% // added
  display: flex
  flex-direction: column
  justify-content: space-between
  align-items: center

​

​