プログラミング記事:第十一回
Flex編
Flexとinline-blockとの違いとは?

(♪♪♪♪♪♪♪)どうも!どうも!ようこそプログラミングコナーへ!

私はあなたの愛しい司会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のほうが枠がちゃんと分かれているので、使いやすいと思っていますが、場合によって、変わりますので、ぜひぜひ、皆さんも使ってみてください!

以上!今日はプログラミング記事でした!