Best practices for vertically aligning flex items

Question

I'm curious to discover the best way of spacing out flex items vertically inside a div. I want the tag to have more space between its siblings, hence why I've added a flex-grow of 3. But the text inside the flex items isn't vertically aligning in the centre.

Why aren't they vertically aligning in the center? And is there a better way of spacing these out vertically anyway?

Curious to know the best practices from everyone, even if it's a different way.

 #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

You're assigning flexbox properties to the children elements, which are still just inline elements (instead of flexbox elements).

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