CSS Flexboxを理解しよう【画像解説付き】
こんにちは、キョウヘイです。
Webデザインを始めたばかりでFlexboxについて詳しく知りたい、もっと簡単にレイアウトが組めるようになりたい、と思っていませんか？
本記事ではFlexboxの詳しい解説と、学習するのにオススメのサイトをご紹介したいと思います。
画像付きで解説するので簡単に理解できますよ。
実際に僕がコーディングしながら作ったページがあるので、参考にしてみてください。ソースコードも公開しますので、実際にどんな風にコードを書けばいいのか実感できると思います。
CSS Flexboxを理解しよう
Flexboxとはレイアウトを簡単に組めるCSSの機能です。CSSのプロパティを少し記述するだけで簡単にレイアウトを組むことができます。
Flexboxでは親要素を「Flexコンテナ」、子要素を「Flexアイテム」と呼びます。基本的に親要素にdisplayプロパティを設定し、値をflexとすれば子要素が横並びになります。
分かりやすいように背景色をつけています。薄い部分が親要素で中に3つの子要素が入っています。
通常ブロック要素は縦に並んでいきますが、親要素にdisplay: flex; とすることで横並びにレイアウトが組めているのが分かりますね。
このようにCSSを少し記述するだけで簡単にレイアウトが組めるので、WebデザインをするならFlexboxはマスターしておいた方が良いと思いませんか？
基本的なFlexboxの書き方は親要素（Flexコンテナ）にCSSを記述していくのですが、もちろん単純な横並びだけではなく様々なレイアウトが可能です。
ではこれからFlexboxに用意されたフレキシブルで素敵なレイアウトの指定方法を解説していきましょう。
justify-contentで横方向のレイアウトを調整
justify-contentプロパティは横方向のレイアウトを調整できます。
Flexコンテナにdisplay: flex; で先ほど見ていただいたデフォルトの状態になり、さらにjustify-contentプロパティを設定することによって様々なレイアウトを組むことができます。
justify-contentがとれる値は画像の通りです。どのようなレイアウトになるかは画像を見れば一目瞭然ですね。
画像が見にくい場合はコチラに記事内のプロパティをまとめていますので参照してください。
.parent{
display: flex;
justify-content: center;
}
上記のようなイメージです。justify-contentの値をcenterにすると中央揃えになり、flex-endにすると右端に寄って配置されます。flex-startはデフォルトなのでdisplay: flex;を指定した段階で反映されます。
flex-start…デフォルト。左に寄って配置。
flex-center…中央寄せ。
flex-end…右寄せ。
space-between…最初と最後の要素を両端に配置し、残りを等間隔に配置。
space-around…全て等間隔に配置。
align-itemsで縦方向のレイアウトを調整
align-itemsは縦方向のレイアウトを調整できます。画像をご覧いただければ挙動が分かるかと思います。
align-items: stretch;がデフォルトで「親要素の高さいっぱいまで、もしくは一番コンテンツの多い子要素の高さに合わせて広がる」というものです。
注意事項としては子要素に高さが指定されていると有効になりません。align-itemsを指定してもレイアウトが変わらない場合は、要素に高さが指定されていないか疑ってみてください。
stretch…デフォルト。挙動は上記の通り。
flex-start…上揃え。
flex-end…下揃え。
center…中央揃え。
baseline…ベースラインで揃える。
align-contentは複数行を縦に調整
align-contentは複数行の要素を縦方向に調整します。
後ほど紹介しますが、flex-wrapというプロパティで値をwrapに指定するとflexアイテムが折り返し表示されます。つまり上記画像のように複数行になるということですね。
デフォルトでflex-wrapはnowrapという「折り返さない」指定になっており、flexアイテムは１行で詰まった感じに表示されます。この１行の状態ではalign-contentは無効になってしまうので、必ず折り返しで複数行にした状態で指定するようにしてください。
stretch…親要素の高さに合わせて広がる。
flex-start…上揃え。
flex-end…下揃え。
center…中央揃え。
space-between…最初と最後を上下の端に配置し、残りを等間隔に配置。
space-around…全ての行を等間隔に配置。
flex-directionはFlexアイテムの並ぶ向きを指定
flex-directionはFlexアイテムの並ぶ向きを指定します。
rowがデフォルトで横方向に右から左へ。columnは縦方向へ上から下に配置されていきます。それぞれreverseの指定もでき、逆向きでの配置も可能です。
row…デフォルト。右から左へ配置。
row-reverse…左から右へ配置。
column…上から下へ配置。
column-reverse…下から上へ配置。
flex-wrapは要素の折り返しを指定
flex-wrapは要素の折り返しを指定します。align-contentの解説で少し触れたのがここの部分です。
デフォルトがnowrapなので折り返さず詰まった感じになっていますね。wrapにすると折り返し、reverse設定も可能です。
nowrap…デフォルト。折り返さない。
wrap…折り返す。
wrap-reverse…逆向きで折り返す。
flex-flowは並びの向きと折り返しを同時に指定
flex-flowは要素の並ぶ向きと折り返すかどうかを同時に指定できます。
flex-directionとflex-wrapを一緒にしたようなものですね。とれる値はdirectionの値を先に指定し、スペースを空けてwrapの値を指定すればOKです。それぞれのプロパティでとれる値を指定してください。
デフォルトはrow nowrapになっています。
orderはFlexアイテムを任意の順番にする
ここまではFlexコンテナへCSSを指定してきましたが、ここからはFlexアイテムへ指定していくプロパティになります。
orderはFlexアイテムを任意の順番に並び替えることができます。通常、要素はHTMLの記載順に並んでいきますが、orderを使えば特定のFlexアイテムをピンポイントで配置換えできます。
画像で下に表示されている数字がorderで指定した値です。order: -1から4までの指定した順番にFlexアイテムの並びが変わっているのが分かりますね。
.child{
order: 1;
}
上記のように親要素ではなく、子要素に指定するプロパティです。
flex-growはFlexアイテムの伸びる比率を指定
flex-growは子要素に指定し、特定の要素が伸びる比率を決めています。親要素に余りのスペースがあった場合に、指定した子要素が他の子要素に対してどれだけ伸びるかを指定します。
初期値は0でマイナス指定は無効です。
align-selfはFlexアイテムの縦方向を調整
align-selfは指定したFlexアイテムの縦方向の位置を調整します。Flexコンテナに指定したalign-itemsと同じ機能ですが、こちらのalign-selfはFlexアイテムに指定します。
align-selfのほうがalign-itemsよりも優先されます。
auto…デフォルト。Flexコンテナのalign-itemsの値を継承する。
flex-start…上揃え。
flex-end…下揃え。
center…中央揃え。
stretch…親要素、またはコンテンツの多い子要素の高さに合わせて広がる。
baseline…ベースラインで揃える。
以上、ここまでに紹介したプロパティを理解できれば、Flexboxは使いこなせるようになったも同然でしょう。
ソースコードを共有します
「Flexboxについて理解はしたけど具体的にコーディングしろと言われたら難しいかも…」と弱気な人の為に、僕が実際に書いたコードも載せておきますので、参考にしてみてください。
実際のページはコチラ
決して綺麗なコードとは言えませんが、今までのブログ記事で共有してきたコードよりはまとまりのあるコーディングができたと思っています。
ちなみに、classの指定の仕方はBootstrapを真似てコンポーネント化することを意識してみました。
コーディングは実際に手を動かした方が理解できるので、このコードを参考にしながら自分なりにコーディングすることをオススメします。
Flexbox理解にオススメのサイト
僕がFlexboxを勉強するときに参考になったのが上記のFlexbox Froggyというサイトです。
実際に手を動かしてコーディングしながら理解していくことができるので、まだ自分で書ける自信がない人は、こちらのサイトで勉強してみるのがいいかもしれません。
ゲーム感覚で楽しみながら学習できましたよ。
今回は以上です。
あなたがFlexboxについて理解できたならとても嬉しいです。
それではまた。