正确垂直对齐 Flexbox 项目答案

【问题标题】：Vertically Aligning Flexbox Items Correctly正确垂直对齐 Flexbox 项目
【发布时间】：2020-06-28 04:09:30
【问题描述】：

我正在为我的应用创建一个页脚，其中包含 3 个主要组件。当前的页脚容器是：

.footer-container {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: $bar-color;

每个子元素都有

display: inline-block

它会产生我正在寻找的垂直对齐方式：

但是，我希望将 3 个组件在页脚中平均居中。 flexbox space-between 选项看起来最合适，因此我尝试了它。在水平对齐方面，它是完美的，但是当我添加时

display: flex;
align-items: center;

到footer-container 类，它将第一项向下移动。像这样：

我不确定为什么会发生这种情况。我该如何解决？

【问题讨论】：

可以提供html吗？？

标签： html css reactjs flexbox

【解决方案1】：

一个 flexbox 有两个主轴。您正在使用 align-items 沿 flex 容器的一个轴对齐项目，但您还需要包含 justify-content 属性以沿 flex 容器的另一个主轴对齐。这就是为什么您会看到不均匀的行。

当您使用 CSS 属性 justify-content 和 align-items 指定容器的两个轴时，使用 space-between 可以按预期工作。 Flexbox docs

html, body {
  margin: 0;
  padding: 0;
  background: #111;
}

:root {
  --footer-color: #000;
}

.footer-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: var(--footer-color);
}

.footer-container p {
  display: inline-block;
  color: #FFF;
}

<html>
  <body>
    <div class="footer-container">
      <p>Connected</p>
      <p>12:00:59 AM</p>
      <p>Version 0.0.1 (Latest Version)</p>
    </div>
  </body>
</html>

【讨论】：