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

Question

我试图将两个div放在daddy div里面.

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

主要与交叉轴

考虑flex容器的主轴和横轴:

                                                                                                                       ^{资料来源: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;
}

更多细节:在CSS Flexbox中,为什么没有"justify-items"和"justify-self"属性？