彈性盒兒童不對齊底部（彈性端）

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/