【CSS】flexboxとinline-blockでの横並びの方法を比較してみる

CSSで横並びにコンテンツを表示したい場合に、flexboxとinline-blockどちらを使うか迷ったことはありませんか？
私はあります。そこで、この2つについて簡単にまとめていきます。

flexboxで並べた場合

flexboxで並べた場合には、隣同士の要素との隙間がなく、表示されます。

実際のコードはこちら

<div class="flex" style="display: flex;">
    <div class="flex__item" style="width: 50px; height: 50px; background: red;">1</div>
    <div class="flex__item" style="width: 50px; height: 50px; background: orange;">2</div>
    <div class="flex__item" style="width: 50px; height: 50px; background: yellow;">3</div>
    <div class="flex__item" style="width: 50px; height: 50px; background: green;">4</div>
    <div class="flex__item" style="width: 50px; height: 50px; background: blue;">5</div>
</div>

flexboxを使うと表示方法や幅の調整が比較的容易に行えます。
justify-contentを使うことで各要素間の幅を調整することが容易にできますし、align-itemsを使うことで中央揃えができるので、簡単に調整できます。また、flex-wrapで折り返し表示の設定もでき、非常に便利です。
一方で、IE11には対応できていないので、利用時には注意が必要です。
IE人口は減っていくと思いたいので、無視してもいいような気もしますが。

inline-blockで並べた場合

inline-blockで並べた場合には、隣同士の要素との隙間ができます。

inline-blockでも横並びでの表示ができますが、細かい調整はflexboxに比べるとめんどくさい印象です。
実際のコードはこちら

<div class="block">
    <div class="block__item" style="width: 50px; height: 50px; background: red; display: inline-block">1</div>
    <div class="block__item" style="width: 50px; height: 50px; background: orange; display: inline-block">2</div>
    <div class="block__item" style="width: 50px; height: 50px; background: yellow; display: inline-block">3</div>
    <div class="block__item" style="width: 50px; height: 50px; background: green; display: inline-block">4</div>
    <div class="block__item" style="width: 50px; height: 50px; background: blue; display: inline-block">5</div>
</div>

まとめ

flexboxとdisplay: inline-blockについて簡単にまとめました。個人的にはflexboxの方が使い勝手がよく、使いやすいですが、IEに
対応できていないことが気になる場合には、inline-blockを使うことになるでしょう。
私のサイトではflexboxを使っていきます。