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