父对齐内容：flex-start;有一个子元素flex-end？

Question

我可以将所有子元素对齐为flex-start，如下所示：

.parent{
    display:flex;
    align-content:flex-start;
}

但后来我有了一个子元素，一个我希望能够创建为flex-end的子元素，但这样做不起作用：

#child2{
    align-self:flex-end;
}

child2不会与flex-end对齐的原因是什么？

Answer 1

  

child2未能与flex-end对齐的原因是什么？

我的回答可能足以回答你的问题：

• Why isn't align-self aligning my div to the bottom of my flexbox?

这是另一个可能的答案：

您尚未在代码中指定flex-direction。这意味着容器将应用默认值：flex-direction: row。

这意味着主轴是水平的，横轴是垂直的。

align-*属性（align-content，align-items和align-self）控制十字轴上的柔性项目的对齐方式（垂直，在这种情况）。

所以在你的代码中你要说：

• 将我的项目对齐容器顶部
• 在底部对齐一个项目（#child2）。

假设这是你真正想要的，你需要给容器一些高度。如果没有定义的高度，容器默认为height: auto，即内容的高度 - 离开align-self，无处可去。

然后，您需要考虑align-self不能与align-content一起使用。它仅适用于align-items。 （More details.）

如果您确实想要沿着主轴（水平）对齐项目，则需要使用justify-content属性。这些项目已经justify-content: flex-start，因为它是默认值。

但是，主轴没有justify-self属性，就像横轴有align-self属性一样。因此，您需要使用auto页边距。 （More details。）

Answer 2

另一种解决方案可能是，from pkg.fibonacci import Fibonacci f = Fibonacci() f.fib(100) 到您的上一个子元素

这会填满整个空间并将child2移到右侧

flex:1