CSS横並び方法(自分用メモ）

floatの利用

①横並びにしたいコンテンツに[float="left"]や[float="right"]をつける

②この時の問題点としてfloatを設定すると高さがなくなり、コンテンツが重なってしまう

③これを解決するために疑似要素をCSSに書く
※毎回同じなのでワンセットで覚えてしまってOK

④HTMLでfloatさせる対象を囲っている親要素にclearクラスをつける

✅なくそう！floatわけわからん！の壁！
html、css初心者泣かせ(自分も泣いた)のfloatについて図解しました。#100DaysOfCode #30DAYSトライアル pic.twitter.com/L2Tm4WMmBr

— ちづみ (@098ra0209) January 16, 2019

flexでの横並び

①横並びにさせたい要素に[display: flex;]をつけるだけで横並びにできる

②横並びにさせたい要素の親要素に[flex-wrap: wrap;]をつけることで、子要素の幅が親要素を超えた時(=収まらなくなったとき)には勝手に改行してくれる