无法让 flexbox 垂直对齐元素答案

【问题标题】：Can't get flexbox to vertically justify elements无法让 flexbox 垂直对齐元素
【发布时间】：2019-07-06 19:32:11
【问题描述】：

我刚刚开始学习 HTML/CSS，我无法让 flexbox 垂直对齐元素（或做任何事情）。我无法从概念上理解为什么它不能将元素识别为单独的元素来证明。

CSS 和 HTML：

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.odd-elements {
  margin: auto;
  width: 100px;
  height: 100px;
  border-top-width: 1px;
  border-top-color: #687291;
  border-top-style: solid;
  text-align: center;
  background-color: #dfe1e7;
}

.even-elements {
  margin: auto;
  width: 100px;
  height: 100px;
  border-top-width: 1px;
  border-top-color: #687291;
  border-top-style: solid;
  text-align: center;
  background-color: #eeeff2;
}

#e6 {
  margin: auto;
  width: 100px;
  height: 100px;
  border: 4px solid black;
  text-align: center;
  vertical-align: middle;
  line-height: 100px;
  background-color: #687291;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="styleA.css" />
  <title>CS142 Project #1</title>
</head>

<body>
  <div class="box">
    <span class="odd-elements">A</span>
    <span class="even-elements">B</span>
    <span class="odd-elements">C</span>
    <span class="even-elements">D</span>
    <span class="odd-elements">E</span>
    <span id="e6">F</span>
  </div>
</body>

</html>

【问题讨论】：

不太确定你真正想要达到的目标，但是带有display:block 的项目只是它们需要的高度，除非你另有说明。给.box 一个大于内部元素总和的height（或min-height），你会看到一些东西。
能否请您添加您想要的截图。谢谢
你必须指定flexbox沿flex方向的范围（这里是column）以便它知道它有多少空间可以占据 - 所以给height: 100vh这样的东西来查看垂直justification

标签： html css flexbox vertical-alignment

【解决方案1】：

只需将您的 CSS 更改为：

      .odd-elements, even-elements{
         display: inline-flex;
         justify-content: center;
         align-items: center;
       }

【讨论】：

【解决方案2】：

如果您想将子项居中，则必须将您的子项用作弹性容器。在这种情况下，跨度标签就是您的孩子。因此，您必须在 span 标签中添加 display: flex （要做 flex 容器）、 justify-content: center、 align-items: center 。顺便说一句，如果您在 span 标签中添加一个公共类，那就太好了。

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.box span {
  display: flex;
  justify-content: center;
  align-items: center;
}

.odd-elements {
  margin: auto;
  width: 100px;
  height: 100px;
  border-top-width: 1px;
  border-top-color: #687291;
  border-top-style: solid;
  text-align: center;
  background-color: #dfe1e7;
}

.even-elements {
  margin: auto;
  width: 100px;
  height: 100px;
  border-top-width: 1px;
  border-top-color: #687291;
  border-top-style: solid;
  text-align: center;
  background-color: #eeeff2;
}

#e6 {
  margin: auto;
  width: 100px;
  height: 100px;
  border: 4px solid black;
  text-align: center;
  vertical-align: middle;
  line-height: 100px;
  background-color: #687291;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="styleA.css" />
  <title>CS142 Project #1</title>
</head>

<body>
  <div class="box">
    <span class="odd-elements">A</span>
    <span class="even-elements">B</span>
    <span class="odd-elements">C</span>
    <span class="even-elements">D</span>
    <span class="odd-elements">E</span>
    <span id="e6">F</span>
  </div>
</body>

</html>

【讨论】：