コピペでできる！flexboxを使ったレイアウトまとめ！
flexbox使っていますか？
Webサイトのレイアウトがとても楽になるflexbox。flexboxを使ったレイアウトのサンプルをまとめました。
ページレイアウトだけでなく色んな用途に使えますので、ぜひコピペして使ってください。
ページレイアウト
2カラム（固定カラム＋可変カラム）
「2カラム（固定カラム＋可変カラム）」のレイアウトです。
よくある使い方としては、1つのカラムは固定幅にしてメニューなどに使用し、もう１つのカラムは可変幅にしてコンテンツを表示します。
もちろんレスポンシブで、画面サイズが小さいデバイスでは横いっぱいにカラムを広げます。
3カラム（等幅）
「3カラム（等幅）」のレイアウトです。
これもよくみるレイアウトです。ポートフォリオやランディングページでよく使われます。
もちろんレスポンシブで、画面サイズが小さいデバイスでは横いっぱいにカラムを広げます。
3カラム（固定カラム＋可変カラム＋固定カラム）
「3カラム（固定カラム＋可変カラム＋固定カラム）」のレイアウトです。
こちらはニュースやポータルサイトなど、情報量がおおいサイトでみるレイアウトです。左右にあるカラムでナビゲーションや広告を表示するようなタイプです。
もちろんレスポンシブで、画面サイズが小さいデバイスでは横いっぱいにカラムを広げます。
フォームレイアウト
テキストボックス＋ボタン
テキストボックスとボタンがセットになったフォームで、メールアドレスの入力や検索画面でよく見るレイアウトです。
flexboxを使えば、テキストボックスとボタンの高さを一致させることも簡単です。
メディアレイアウト
コメントブロック、カードレイアウト
コメントブロックやカードレイアウトでみるレイアウトです。
小さなアバター画像やアイキャッチ画像と、テキストがセットになったレイアウトです。
flexboxを使えば、レイアウト崩れなく簡単にレイアウトできます。下の例では入れ子にしていますが、レイアウトの崩れもありません。
最後まで読んでいただきありがとうございます。
また読んでくださいませ。
そんじゃーね。