弹性盒儿童不对齐底部（弹性端）

Question

我只是将自己介绍到flexbox和从我的理解，如果我有一个flex家长，然后我可以调整家长的子女单行与align-items规则。但是，我的孩子们并没有像这里看到的那样改变它们的对齐方式：https://jsfiddle.net/b9L09gsa/

内容保持在顶部而不是像我想的那样在底部。这个想法是让徽标div和导航项目整齐排列在底部。显然我不明白，任何帮助都会很棒！

Answer 1

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

#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/