この記事の内容
- float について
- Flexbox について
- 後書き
なお、この記事ではプログラミングスクールに通うこと、２週間の私が復習するために
書き残しているメモみたいな内容なので、間違った解釈が多々あるかも知れません。
何卒ご了承くださいm(_ _)m
floatについて
要素を左、または右に寄せる際に使う。
float:left;
これを適用したい要素に付けるだけ...これだけならいいのだけど
問題が発生する場合があって、理解するのが地味に難しい。
問題点
- 回り込ませたくない要素を回り込ませてしまう。
- 親要素の高さがなくなる。
1について、float は並べるというより、浮かせて配置している。
そのため、その後に続く要素が支えを失い浮かせた要素の下に回り込んでしまう。
2について、floatは浮かせているので、親要素は float が
適用されている子要素の高さを認識できなくなる。
解消方法
解消方法は調べてみたところ、色々あるみたいだけど clearfix を
使うのが、一般的みたいなのでそれを書き留めておきます。
CSSファイルの最終行に
.clearfix::after {
content: "";
clear: both;
display: block;
}
を追加して、float の副作用を解決したい要素に clearfixクラス を
付与することで解消することが可能です。
Flexboxについて
こちらも横に並べたい時に使う。
floatとの違いは、並べたい要素の親要素に適用する点だと思う。
display: flex;
この1行を親要素に適用するだけでいい。
Flexbox は justify-content と併用することで、隙間などを調節することができる。
justify-content: space-between;
上のコードは両端が左右により等間隔で設置することができる。
他にも調べたら色々プロパティが、あるけどここでは省略！
後書き
要素を横に並べるというのは簡単そうに見えて
結構難しく、色々なやり方があると学べた。（もうちょっとマシな感想ないのかな？）
Quitaで投稿するのは、アウトプットの練習も兼ねてるので
個人的に詰まったところがあったら、その都度記事にしていきたい！