flex box的孩子不对齐底部（flex end）[重复]

Posted 2023-03-05

【中文标题】flex box的孩子不对齐底部（flex end）[重复]

【英文标题】：Children of flex box don't align to bottom (flex end) [duplicate]

【发布时间】：2017-11-08 00:34:21

【问题描述】：

我只是向flexbox 介绍自己，据我所知，如果我有一个flex 父级，那么我可以将单行上的父级的子级与align-items 规则对齐。但是，我的孩子们并没有改变他们的对齐方式，如下所示：https://jsfiddle.net/b9L09gsa/

内容保留在顶部，而不是我想要的底部。这个想法是让标志 div 和 nav 项目在底部整齐地对齐。显然我不明白的东西，任何帮助都会很棒！

【问题讨论】：

我经常回顾的一个有用的参考是A Complete Guide to Flexbox

【参考方案1】：

您需要弹性容器上的这些属性，而不是弹性项目：

#nav-contain 
    display:flex;
    justify-content: flex-end;
    align-items: flex-end;

#logo, .nav-item-contain 
    flex-grow: 1;

https://jsfiddle.net/b9L09gsa/1/

要覆盖单个弹性项目，请改用align-self：

#nav-contain 
    display:flex;
    justify-content: flex-end;

#logo, .nav-item-contain 
    flex-grow: 1;
    align-self: flex-end;

https://jsfiddle.net/b9L09gsa/2/