<span> element refuses to go inline in flexbox
css, flexbox, html
Solution
I'm assuming that your `.option-text` has `display:flex` (otherwise setting `flex-direction` on it would make no sense). Given that, the behavior you describe is actually required by the flexbox spec -- children of a flex container are forced to have a block-flavored display type.
Specifically, the spec says:
each child of a flex container becomes a flex item [...] The computed ‘display’ of a flex item is determined by applying the table in CSS 2.1 Chapter 9.7
Source: http://www.w3.org/TR/css3-flexbox/#flex-items
That table it refers to, from CSS 2.1, basically converts non-blocks to blocks.
If you don't want this behavior, just wrap your `<span>` in a `<div>`, and then the `<div>` will play the role of the flex item so that the `<span>` can keep its display type.
Problem
I have a `span` (`.time-pretext`) inside a `div` inside a flexbox `a`, like this: ``` <a class="option-container option-edit-time" href="#"> <div class="option-icon"><canvas id="time-canvas" width="128" height="128"></canvas></div> <div class="option-text"><span class="time-pretext">I have</span>60 minutes</div> </a> ``` `.option-text` here gets `flex-direction: column`, and when I give it that property, the span will only take block display options (`block` or `-webkit-box`) and no inline ones (`inline-block`). Why? Incidentally, it works fine in the original flexbox implementation (`display: -webkit-box`). Only in the newest implementation (`display: flex`) does this come up.