はじめに
横並びに表示するCSSは主にflexとfloatの2種類あることを学びました。
使い勝手がいいのはflexだと思うのですが、深掘りすると親子関係が重要なのだとわかったので、それをまとめたいと思います。
? display: flex;とは
レイアウトを簡単に管理するためにCSSで使うもの。
結論
複雑なレイアウトを簡単に作成でき、レスポンシブデザインにも対応しやすくなる。
最初のスタイルは親要素から書き始める！
設定方法
【見た目】
このように横並びで表示させたい時にまずHTMLから、
<div class="container">
<div class="item">アイテム1</div>
<div class="item">アイテム2</div>
<div class="item">アイテム3</div>
</div>
CSSでは、
〔１〕親要素 に display: flex; を設定する。
〔 2 〕アイテムの配置やサイズの調整を効率的に行うための様々なプロパティを設定。
〔 3 〕指定した要素の子要素に反映される。
.container {
display: flex;
justify-content: center; /* 主軸に沿って中央寄せ */
align-items: center; /* 交差軸に沿って中央寄せ */
height: 100vh; /* ビューポートの高さを占める */
}
.item {
background-color: lightcoral;
padding: 20px;
margin: 10px;
}
親要素に使えるCSSプロパティ
・display: flex;: 親要素にフレックスプロパティを書いて、配置替えしますよ〜って宣言する感じ（デフォは横並び）。
・flex-direction: アイテムの配置方向を指定する。例えば、row（横並び）や column（縦並び）。
・justify-content: 主軸に沿ったアイテムの配置方法を指定する（左寄せ、中央寄せ、右寄せ、均等配置など）。
・align-items: 交差軸に沿ったアイテムの配置方法を指定する（上寄せ、中央寄せ、下寄せなど）。
・flex-wrap: アイテムがコンテナ内に収まりきらない場合の折り返し方法を指定する。
子要素に使えるプロパティ
・flex-grow: アイテムが利用可能なスペースをどの程度拡張できるかを指定する。
・flex-shrink: アイテムが利用可能なスペースをどの程度縮小できるかを指定する。
・flex-basis: アイテムの基本サイズを指定する。
・align-self: 特定のアイテムに対して交差軸に沿った配置方法を指定する（align-items の上書き）。
（floatのさわりだけ）
・要素を左または右に浮かせて配置する。
・浮かせた要素の親要素に clearfix を適用することで、レイアウトの崩れを防ぐ。
・FlexboxやGridの登場により、floatの使用頻度は減っていますが、特定のレイアウトにはまだ有用。
おわりに
レスポンシブデザインに対応できるflexは使い勝手がよさそうだと思いました。
floatの場合は他に設定の必要なプロパティがあるので、手間が増える。浮かせるってよく分からん、、。
今日覚えておきたいひとつは、display: flex;は親要素につける。
だから時々反映されなかったんだ、、。（子要素にあててた）
あのときは、こんな超初歩的なことでつまづいてたんだ、と早く言えるようになりたい。
そういえばdisplay押さえといた方が良さそう、と今日もやっぱり思ったので、早くまとめます。