【问题标题】：Cannot seem to vertically space items with flexbox. Flex: column and space-around doesn't seem to work似乎无法使用 flexbox 垂直分隔项目。 Flex：列和空间周围似乎不起作用
【发布时间】：2021-06-10 20:24:05
【问题描述】：

我查看了这个问题，但没有发现任何问题。让父级 flex 和子级 flex-direction: column w/space-between/space-evenly 似乎不起作用。

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

我错过了什么？

干杯！

代码笔： 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

【问题讨论】：

标签： css sass flexbox

【解决方案1】：

不行，因为.all-els没有height，所以没地方放space-beetwen

你可以试试

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

【讨论】：

有道理！干杯！
@LovelyAndy 不用担心，很高兴我能帮上忙！感谢您以易于理解的方式提出问题

【解决方案2】：

欢迎您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>

sass

.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

【讨论】：