flexbox/display

flexかinline-flexを指定することでフレックスコンテナとなる。

display: flex

ブロック要素として動作するフレックスコンテナにする。

<span>hoge</span>
<div style="display: flex">
  <div style="flex: auto; background:#ffb7b7">a</div>
  <div style="flex: auto; background:#b7b7ff">b</div>
</div>
hoge
a
b

display: inline-flex

インライン要素として動作するフレックスコンテナにする。

<span>hoge</span>
<div style="display: inline-flex">
  <div style="flex: auto; background:#ffb7b7">a</div>
  <div style="flex: auto; background:#b7b7ff">b</div>
</div>
hoge
a
b