プログラミング記事:第十二回
Flex編
Flexとfloatとの違いとは?

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

あなたの愛しい司会のNISO desu!

前回はflexとinline-blockの違いを説明しましたが、実際横並びの要素はもう一個あって、今日はそれを紹介しようと思います。

それでは、どうぞ。。(ドラムサウンド)floatさん!

Float:”どうも”

じゃ先ず自己紹介からお願いします。

float は CSS のプロパティで、要素を包含ブロックの左右どちらかの側に沿うように設置し、テキストやインライン要素がその周りを回りこめるように定義します。要素はウェブページの通常のフローから外れますが、 (絶対位置指定 とは対照的に) フローの一部であり続けます。 ー出典:MDN

それでは使い方を見てみましょう。

Floatが入れてない原図です

outerabcにfloat leftをいれてみました

あれ?横並びになってない。。?

Float:”ボロックを浮かぶのfloatなので、中の枠にいれてみてください!”

赤いボックスだけにfloat leftを入れました

あれ?

Float:”横並ばせたいならabcにいれてみ”

青いボックスだけにfloat right

なるほど!そういうことですね!

 

では実際例を見てみましょう。

青いボックスにfloat left 赤いボックスにfloat right

赤いボックスにfloat left 青いボックスにfloat right

Float:”で、Flexとなにが違いというと、枠が分けていないところですね。あと親要素ではないことです。”

じゃinline-blockとの違いは?

Float:”そもそもdisplayの関数を変えていないから、ボロックの本質に影響が出ないです!inline-blockだけではこうにならないでしょう。”

なるほど、そういうことですね。

今日も凄く勉強になりました。また次回プログラミングコナーで!