垂直對齊彈性項目的最佳做法

Question

我很好奇，發現了在div內垂直排列彈性項目的最佳方法。 我希望標簽在其兄弟姐妹之間留出更多空間，因此為什么我要添加一個3的flex-grow。但是flex項內的文本不在中心垂直對齊。

它們為什么不垂直居中對齊？ 還有一種更好的方式將這些垂直放置嗎？

好奇地知道每個人的最佳做法，即使這是另一種方式。

 #test { display: flex; padding: 20px; background: lightgreen; justify-content: space-between; align-items: center; flex-direction: column; height: 200px; } a { flex-grow: 3; background: red; justify-content: center; align-items: center; } span { flex-grow: 1; background: pink; justify-content: center; align-items: center; } 

 <div id='test'> <span>stuff</span> <span>more stuff...</span> <a href='#'>link</a> <span>even more stuff</span> </div> 

Answer 1

您正在將flexbox屬性分配給子元素，而子元素仍然只是內聯元素（而不是flexbox元素）。

 #test { display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 20px; background: lightgreen; height: 200px; } #test > * { display: flex; align-items: center; } a { flex-grow: 3; background: red; } span { flex-grow: 1; background: pink; } 

 <div id='test'> <span>stuff</span> <span>more stuff...</span> <a href='#'>link</a> <span>even more stuff</span> </div>