CSSの覚書 | ワクガンス

flexの基本

flexは横並びのレイアウトに対して効果を発揮する。垂直ならびも可能だが割愛。
基本的に親要素にだけ設定すれば良いのでfloatやdisplay:inline-blockよりも使いやすい。

HTML

	<div style="display:flex;justify-content:space-around;flex-wrap:wrap;background-color:#ffd764">
		<div style="width:200px;background-color:#cde8ff">ネコ</div>
		<div style="width:200px;background-color:#cde8ff">イヌ</div>
		<div style="width:200px;background-color:#cde8ff">カワウソ</div>
		<div style="width:200px;background-color:#cde8ff">イグアナ</div>
	</div>
	

justify-content

justify-content:flex-start;	子要素を左寄せで配置する（デフォルト）
justify-content:flex-end;	子要素を右寄せで配置する
justify-content:center;	子要素を中央寄せで配置する。
justify-content:space-between;	子要素を両端から均等に配置する
justify-content:space-around;	子要素を均等間隔に配置する

flex-wrap

flex-wrap:nowrap	子要素を縮めてでも1行に収める。（デフォルト）
flex-wrap:wrap	子要素が1行に収まらないなら改行する。
flex-wrap:wrap-reverse	子要素が1行に収まらないなら改行する。順番は逆になる。

2023-9-16

xxx

2023-9-16