webサイト制作においてレイアウトを組む際、Grid Layoutだと癖があってまだ使いにくい、floatは用途が限定的、などの理由でFlexboxを使う機会が多いです。
今更感はありますが、都度レイアウト用のcssを調べるのも面倒なので備忘録的によく使うものをまとめておきます。
CONTENTS
上下左右中央寄せ
要素を上下左右中央寄せにする場合は、ネガティブマージンを使ったり、tableレイアウトを使用することもありますが、Flexboxを使う方法が行数も少なく簡単なのでおすすめです。
See the Pen flex-center by OKD (@OKD) on CodePen.
display: flex;
justify-content: center;
align-items: center;3行で書ける手軽さも魅力です。
片方固定で片方可変のレイアウト
横並びの要素の片方が画像だったり、アイコンだったりして片方のみサイズを変えたくない場合などに使います。
See the Pen flex-sample#02 by OKD (@OKD) on CodePen.
片方は横幅を指定、もう片方はflex:1を指定します。
.main {
flex: 1;
}
.side {
width: 200px;
}ギャラリー的なレイアウト
写真を並べる時に便利なレイアウト。実際はクリックで画像拡大などのエフェクトを仕込むことも多いですが、ベースの部分はこのようになります。
See the Pen flex-sample#09 by OKD (@OKD) on CodePen.
要素を両端（左右）に寄せる
ヘッダーなどでよく使うレイアウト。
See the Pen flex-sample#03 by OKD (@OKD) on CodePen.
要素を両端（左右）に寄せる-2
先ほどの例にコンタクト用のボタンなどが加わった時のレイアウト
See the Pen flex-sample#04 by OKD (@OKD) on CodePen.
要素の均等配置
左右いっぱいに要素を広げて、その間隔を均等にする場合のレイアウト。
justify-content : space-between「space-around」や「space-evenly」などの指定もありますが、あんまり使う機会がないので今回は割愛します。
See the Pen flex-sample#05 by OKD (@OKD) on CodePen.
画像とテキストを左右に並べたレイアウト
コンセプトの説明だったり、３つの特徴だったりでよく使うレイアウト。偶数番目の要素に
flex-direction: row-reverse;を指定して、左右の順番を入れ替えています。このレイアウトをfloatで実装するとスマホ対応時に片方をdisplay:noneとかで非表示にしたり設定がめんどいのでもっぱらflex頼りです。
See the Pen Flexbox Example #8 by OKD (@OKD) on CodePen.
要素を横並びにし、その中でボタンなどを下に揃えるレイアウト
横並びの要素内で「続きを読む」などのリンクを下揃えにする事でバランスよく見えます。liタグの直下にaタグを置いて横並びの要素自体がリンクになっているパターンです。
See the Pen flex-sample#07 by OKD (@OKD) on CodePen.
複数行に要素を並べるグリッドレイアウト
要素を横並びにしつつ、複数行に渡って設置するレイアウト。ネガティブマージンを組み合わせています。
CSSグリッドシステムで「Gridlex」というものがあり、軽量で使いやすくscssも対応しています。
https://gridlex.devlint.fr/
See the Pen flex-sample#08 by OKD (@OKD) on CodePen.
いかがでしたでしょうか。
スマホ用には別途記述が必要なものもありますが、制作時によく使う実践的なレイアウトをまとめました。
まだまだ色々なレイアウトが可能ですが、いったんこれくらい把握していれば困ることは少ないかなと思います。
