父对齐内容：flex-start；同时有一个子元素 flex-end 吗？

Question

我可以像这样对齐所有子元素flex-start：

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

但是我有一个子元素，我希望能够将其创建为 a flex-end，但这样做是行不通的：

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

child2无法对齐的原因是什么flex-end？

Answer 1

child2无法对齐的原因是什么flex-end？

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

• 为什么我的 div 没有align-self与弹性盒的底部对齐？

这是另一个可能的答案：

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

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

属性align-*（align-content、align-items和）控制 Flex 项目在横轴align-self（在本例中为垂直轴）上的对齐方式。

所以在你的代码中你说：

• 将我的物品与容器顶部对齐
• #child2在底部对齐一项 ( )。

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

然后你需要考虑这align-self不适用于align-content. 它仅适用于align-items. （更多细节。）

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

justify-self但是，主轴没有属性，就像align-self交叉轴有属性一样。所以你需要使用auto边距。（更多细节。）