正确垂直对齐 Flexbox 项目
[英]Vertically Aligning Flexbox Items Correctly
问题描述
I am working on creating a footer for my app where there are 3 main components.
我正在为我的应用程序创建一个页脚，其中有 3 个主要组件。 The current footer container is:当前的页脚容器是：
.footer-container { position: fixed; left: 0; bottom: 0; width: 100%; background-color: $bar-color;
Each child element has每个子元素都有
display: inline-block
And it produces the vertical alignment that I am looking for:它产生了我正在寻找的垂直 alignment：
However, I am looking to center the 3 components equally across the footer.但是，我希望将 3 个组件在页脚中平均居中。 The flexbox space-between option looked like it would fit best, therefore I tried it. flexbox space-between选项看起来最合适，因此我尝试了它。 In terms of horizontal alignment, it is perfect, however when I add就水平 alignment 而言，它是完美的，但是当我添加
display: flex; align-items: center;
to the footer-container class it moves the first item down.到footer-container class 它将第一项向下移动。 Like this:像这样：
I'm not sure why this is occurring.我不确定为什么会这样。 How would I fix it?我将如何解决它？
1 个解决方案
解决方案1
1 2020-06-28 04:24:48
A flexbox has two main axes. flexbox 有两个主轴。 You are aligning items along one axis of the flex container with align-items , but you also need to include the justify-content property for aligning along the other main axis of the flex container.您正在使用align-items沿 flex 容器的一个轴对齐项目，但您还需要包含justify-content属性以沿 flex 容器的另一个主轴对齐。 That is why you see the uneven row.这就是为什么你会看到不均匀的行。
When you specify both axes of the container with CSS properties justify-content and align-items , using space-between works as expected.当您使用 CSS 属性justify-content和align-items指定容器的两个轴时，使用space-between可以按预期工作。 Flexbox docs Flexbox 文档
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.