ベースとなるHTML
See the Pen
gOLRQVL by おの れいこ (@reico)
on CodePen.
どうでもいいですが、class名／id名には日本語も使えます。
①dispay:inline-block（横並び）
上記のコードの右上「edit on codepen」をクリックして、18行目のコメントを解除してみましょう。
dispay:inline-blockは、ゆるい家庭です。
基本的な考え方は「とりあえず横にならべよ〜」という感じです。入らなくなったら行送りすればいいや〜という感じ。サイズ(width/height)のことは考えていません。こっちから言えば聞いてくれます。
②flexbox（横並びでは主流）
display:flexは親に指定します。21行目だけコメントを外してみましょう。
flexは、きちんとしたお固い家庭です。基本的考え方は、「親の幅の中で、身の丈にあった幅を割り振ろう」というもの。大きい子には大きい幅が与えられ、小さい子には小さい幅が与えられます。
基本的には親の幅に全員を収めようとするので、親の幅が小さい場合は、それぞれの子要素の中で行送りし、子が縦長になります。
逆に、親の幅が大きい場合は、inline-blockと同じような見た目になり、親の幅に余りが生じます。
ただし、かなり優秀な家庭なので、いろいろなカスタマイズが効きます。もちろん行送りもできるので、インスタのようなギャラリー表示にも強いです。
flexboxに関しては、こちらの記事&チートシートがあれば完璧。
日本語対応！CSS Flexboxのチートシートを作ったので配布します｜Webクリエイターボックス
③float（flexの前に主流だった）
25〜29行目のコメントを外してみましょう。見た目はinline-blockとあまり変わりませんね。同じ効果で4行も多いなら、横並びにする目的で使うのは無駄な労力です。
ということで、違う使い道を考えましょう。
新聞のように画像のまわりにテキストを流し込みたいときなんかに使います。これだけは、floatでしかできません。
See the Pen
rNWwQbq by おの れいこ (@reico)
on CodePen.
④position
positionは、よくflexやfloatとまとめて説明されがちですが、随分違う次元の話になるので、また次回。
