EDIT See comment above, mostly related to vertical-align things, not flexbox. The author's point still stands: CSS is hard. Smells like baseline / vertical ali

EDIT See comment above, mostly related to vertical-align things, not flexbox. The author's point still stands: CSS is hard. Smells like baseline / vertical alignment issues. The author hones in at the end, <div style="display: inline-block"> <span style="display: flex; align-items: center"> <span><!-- empty --></span> <span>Text</span> </span> </div> The presences of that empty tag is what changes the alignment. This also requires the flex container to be wrapper in an inline-block element, and for the flex container to align-items: center. The flexbox [spec][1] talks about how flex items become "blockified," but I don't see anything that indicates empty children which demonstrate this weird behavior. [1]: https://www.w3.org/TR/css-flexbox-1/#flex-items https://www.w3.org/TR/css-flexbox-1/#flex-items