为什么不合理 - 内容集中我的divs？

Question

我试图将两个div水平地放在爸爸div中。

Daddy div设置为flex-direction: column，因为我希望孩子在另一个下面划分一个，但是在页面的中心。

justify-content: center;应该这样做，但不能正常工作。

我终于让它与align-self一起工作了，但任何解释为什么这么多代码不足以将div放在里面？

这是我的代码：

<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;
}

Answer 1

主要与交叉轴

考虑灵活容器的主轴和横轴：

^来源：W3C

在上图中，主轴是水平的，横轴是垂直的。这些是Flex容器的默认方向。

但是，可以使用flex-direction属性轻松切换这些指示。

/* 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;

（横轴始终垂直于主轴。）

justify-content属性（仅适用于主轴）

justify-content属性沿着flex容器的主轴对齐flex项目。

换句话说，当您的容器为flex-direction: row时，会使主轴水平。 justify-content: center将按预期工作。

但您已将容器设置为flex-direction: column。这意味着主轴现在是垂直的，justify-content将向上/向下定位弹性项目，而不是左/右。

由于你的例子中没有额外的高度，你不会注意到任何不同的东西; justify-content没有空间可以工作。 （与宽度不同，默认情况下，块元素填充100％，必须定义高度。否则，元素默认为auto - 内容的高度。）但是给容器一些高度，看看会发生什么。

align- *属性（仅适用于横轴）

align-self，align-items和align-content属性在弹性容器的横轴上运行（同样，始终垂直于主轴）。

由于您的主轴是垂直的，因此align-*属性会左右对齐弹性项目。这就是align-self努力使你的div居中的原因。

  

快速摘要：根据flex-direction，主轴和十字轴开关，使用它们分配属性。

解决方案

如果您的目标是最少的代码，那么这就是您所需要的：

.main {
    display: flex;
    flex-direction: column;
    align-items: center;
}

更多详情：In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?