Css 似乎无法使用flexbox垂直分隔项目。弹性：柱和周围的空间不'；好像不行

我查了一下这个问题，没有发现任何有用的东西。将父对象和子对象分别设置为flex-direction:columnw/space-between/space似乎不起作用

我已经在这个代码笔中重新创建了所有内容，但我真的不知道如何在空间方面使页面看起来像这样

我错过了什么

干杯

代码笔：

HTML

---

它不起作用，因为

。所有EL

没有

高度

，因此它没有放置

空间的位置

你可以试试

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

您正在处理欢迎
欢迎页面容器
因为它没有孩子

Flex为他们的孩子工作


HTML:


更准确地说
下面是您希望对代码进行细微更改的内容。
我所做的唯一更改是删除了一些div
并添加
对正内容：均匀间隔
和
弹性方向：列

HTML

有道理！干杯@亲爱的，不用担心，很高兴我能帮上忙！谢谢你以一种易于理解的方式提出你的问题
.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

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

<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>

  .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 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