Question

我正在为我的应用创建页脚，其中包含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类，它将第一项向下移动。像这样：

我不确定为什么会这样。我该如何解决？

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

正确垂直对齐Flexbox项目

1 个答案: