Строчные элементы во flexbox'ах

Способ построения страниц через flexbox не связан с традиционным способом построения CSS. Любой элемент который выступает в роли дочернего flex-контейнера не подчиняется стандартным правилам CSS и поэтому совершенно не важно каким он является в CSS, во flex они все будут блочными. Единственное исключение, что по некоторым правилам элементы могут выпадать из построения flex-макета и возвращаться к традиционному способу построения.

Все просто, у первых потомков элемента с display:flex переопределяется свойство display:block(теперь ему можно задавать размер в отличии от display:inline), вот так:

console.log(getComputedStyle(document.getElementById('span1')).display) 
console.log(getComputedStyle(document.getElementById('span2')).display)

.wrap{display:flex}

<div class="wrap"><span id="span1">span1</span></div> 
<span id="span2">span2</span>