(♪♪♪♪♪♪♪)どうも!どうも!ようこそプログラミングコナーへ!
私はあなたの愛しい司会NISO desu!
始まる前に前回のあらすじに入ります!

Flexを使わないと、横並びはしません。

Flexを使うと横並びます。
さて、続きをしましょうか。
果たして、Flexとinline-blockにはどんな違いがあるでしょう?
早速ですが、inline-blockを見てみましょう(♪♪♪♪♪♪♪)

inline-blockを入れたらこうなります。。
あれ?横並びになってない。。?
先ず最初の違いは、inline-blockは親要素でないことです。
ですので、

abcとabc1にinline-block要素をつけるべきです
ちなみに前回flexの図はこちらになります↓↓↓↓

次の違いが分かるようになりましたか?
そう!赤の位置が違うんだ!
その原因はDeveloper Toolsで解明できます。

flex

inline-block
Flexの場合、outerabcは三つの枠に分けていますので、相殺がなくなります。(flex条約の元に、ついに平和が訪れた)
そして、inline-blockは分けてないので、その戦まだ続けています!(いざ!出陣!)
個人的には、flexのほうが枠がちゃんと分かれているので、使いやすいと思っていますが、場合によって、変わりますので、ぜひぜひ、皆さんも使ってみてください!
以上!今日はプログラミング記事でした!