CSS横並び方法(自分用メモ)
floatの利用
①横並びにしたいコンテンツに[float="left"]や[float="right"]をつける
②この時の問題点としてfloatを設定すると高さがなくなり、コンテンツが重なってしまう
③これを解決するために疑似要素をCSSに書く
※毎回同じなのでワンセットで覚えてしまってOK
④HTMLでfloatさせる対象を囲っている親要素にclearクラスをつける
flexでの横並び
①横並びにさせたい要素に[display: flex;]をつけるだけで横並びにできる
②横並びにさせたい要素の親要素に[flex-wrap: wrap;]をつけることで、子要素の幅が親要素を超えた時(=収まらなくなったとき)には勝手に改行してくれる
この記事が気に入ったらサポートをしてみませんか?