为什么 justify-content 不以我的 div 为中心? [英] Why isn't justify-content centering my divs?
问题描述
我试图将爸爸 div 中的两个 div 水平居中.
Daddy div 设置为 flex-direction: column 因为我希望子 div 一个在另一个下面，但在页面的中心.
justify-content: center; 应该可以但不工作.
我终于用 align-self 让它工作了，但是有什么解释为什么这么多代码不足以使 div 居中?
这是我的代码:
<div class="child-1">HI</div><div class="child-2">我们构建了很棒的东西</div>.主要的 {显示:弹性；弹性方向:列；对齐内容:居中；}
Main vs Cross Axis
考虑弹性容器的主轴和横轴:
来源:W3C
在上图中，主轴是水平的，横轴是垂直的.这些是 flex 容器的默认方向.
但是，这些方向可以通过 <轻松切换code>flex-direction 属性.
/* 主轴水平，横轴垂直 */弹性方向:行；flex-direction: 行反向；/* 主轴是垂直的，横轴是水平的 */弹性方向:列；flex-direction: 列反向；(横轴总是垂直于主轴.)
<小时>justify-content 属性(仅适用于主轴)
justify-content 属性沿 flex 容器的主轴对齐 flex 项.
换句话说，当您的容器是 flex-direction: row 时，这会使主轴水平.justify-content: center 将按您的预期工作.
但是您已将容器设置为 flex-direction: column.这意味着主轴现在是垂直的，justify-content 会将 flex 项目向上/向下定位，而不是向左/向右定位.
由于您的示例中没有额外的高度，因此您不会注意到任何不同；justify-content 没有工作空间.(与宽度不同，块元素默认填充 100%，高度必须定义.否则，元素默认为 auto – 内容的高度.)但是给容器一些高度，看看会发生什么.
align-* 属性(仅适用于横轴)
align-self、align-items 和 align-content 属性在 flex 容器的横轴上操作(同样，始终垂直于主轴).
因为你的主轴是垂直的，align-* 属性将左右对齐 flex 项目.这就是 align-self 努力使您的 div 居中的原因.
快速总结:根据flex-direction，主轴和横轴切换，并带有它们分配的属性.
<小时>
解决方案
如果您的目标是最少的代码，这就是您所需要的:
.main {显示:弹性；弹性方向:列；对齐项目:居中；}<小时>
更多细节:在 CSS Flexbox 中，为什么没有justify-items"?和证明自我"属性?
I am trying to center two divs inside the daddy div horizontally.
Daddy div is set to flex-direction: column as I want the child divs one below another, but at the center of the page.
justify-content: center; should do it but not working.
I finally made it work with align-self, but any explanation why this much code is not enough to center the divs inside?
Here is my code:
<div class="main">
<div class="child-1">HI</div>
<div class="child-2">WE BUILD AWESOME STUFF</div>
</div>
.main {
display: flex;
flex-direction: column;
justify-content: center;
}
Main vs Cross Axis
Consider the main axis and cross axis of a flex container:
Source: W3C
In the image above, the main axis is horizontal and the cross axis is vertical. These are the default directions for a flex container.
However, these directions can be easily switched with the flex-direction property.
/* main axis is horizontal, cross axis is vertical */
flex-direction: row;
flex-direction: row-reverse;
/* main axis is vertical, cross axis is horizontal */
flex-direction: column;
flex-direction: column-reverse;
(The cross axis is always perpendicular to the main axis.)
justify-content property (works on main axis only)
The justify-content property aligns flex items along the main axis of the flex container.
In other words, when your container is flex-direction: row, that makes the main axis horizontal. justify-content: center will work as you expect.
But you've set the container to flex-direction: column. This means that the main axis is now vertical, and justify-content will position flex items up/down, not left/right.
Since you have no extra height in your example, you won't notice anything different; justify-content has no space to work. (Unlike width, which block elements fill 100% by default, heights must be defined. Otherwise, elements default to auto – the height of the content.) But give the container some height and see what happens.
align-* properties (work on cross axis only)
The align-self, align-items and align-content properties operate on a flex container's cross axis (again, always perpendicular to the main axis).
Because your main axis is vertical, the align-* properties will align flex items left/right. That's why align-self worked to center your divs.
Quick Summary: Depending on the
flex-direction, the main axis and cross axis switch, taking their assigned properties with them.
Solution
If your goal is minimal code, here's all you need:
.main {
display: flex;
flex-direction: column;
align-items: center;
}
More details: In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
这篇关于为什么 justify-content 不以我的 div 为中心?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
