Useful knowledge about flexbox
When an element receives
display: flex;, all children will be set to block-level. This is not an issue if the
flexbox implementation is complete, but it's good to know about this little quirk.
Beware of the
Interestingly, Firefox has not implemented
<button> in the same way as Webkit or Blink – yet. In Mozilla's implementation, the inline-block-like display behavior of
<button> cannot be changed via CSS
display. Consequently, if you set a
display: flex; to vertically center, say, button text and an icon, it will look great in Chrome, but broken in Firefox: text and icon wrap because the CSS renderer sees the
display: flex; and sets all children to block-level, even though the button does not actually become a
The good news: This is easily fixable by adding a
<div> that wraps the items inside the button and applying the
flexbox styles on it.
What's more, Mozilla has classified this behavior as a bug and is actively working on it (current status: RESOLVED FIXED in Firefox 52).