垂直对齐弹性项目的最佳做法

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>