【完全版】CSSのレイアウトは、Flexboxで完成!

Flexbox

スポンサーリンク

CSSの真骨頂、Flexboxでレイアウトをする方法を説明します。
Flexboxは、子要素を親要素に対してどのように並べるか指定するCSSであり、親要素に対して2つ(場合によって3つ)のプロパティを指定することで適応できます。

本記事のゴール
  • Flexboxに関するCSSを理解する
  • レイアウトを自在に操る

ウェブページのレイアウトについて

本題に入る前に、読みやすいレイアウトとはどんなものでしょうか?という問いから始めましょう。

CSSレイアウトの組み方

ウェブページを見るユーザーの目線の動きは、主に二つに分類されます。
よって、それに合わせたレイアウトを組むと、ユーザビリティに優れた、読みやすいサイトになります。
優れたレイアウトを組むには、優れたウェブサイトを参考にするとよいでしょう。

レイアウトを組むときに考えないといけないことがあります。

  • コンテンツの優先順位を考える
  • 配置する順番を決定する
  • コンテンツの面積を工夫する

それから、実際にCSSのFlexboxやCSSグリッドを使って配置していきましょう。

Flexboxとは

Flexbox(フレックスボックス)とは「Flexble Box Layout Module」の略で、レイアウトを組むためのCSSの機能です。
これを使えば様々なレイアウトを簡単に組むことができるようになります。

スポンサーリンク

適応させる方法は簡単です。

  1. 親要素のCSSにdisplay: flex;を記述する
  2. 親要素にflexプロパティを記述する

これだけです。それでは具体的にみていきましょう。

Flexboxを適応させる

まず、Flexboxで並べたい複数の要素を一つの親要素で囲みます。
次に、親要素に対してdisplay: flex;というプロパティと値を指定します。そうすることで、子要素をFlexboxで並べることができるようになります。

display-flex
まず親要素に対してflexを指定する

しかし、それだけでは適応させることができません。親要素に対してもう一つのプロパティを指定する必要があります。以下の5つのプロパティから一つ選んで追加指定します。

  • flex-directionプロパティ
  • flex-wrapプロパティ
  • justify-contentプロパティ
  • align-itemsプロパティ
  • align-contentプロパティ

flex-directionでは、子要素を縦か横に並べてい時に指定します。
flex-wrapプロパティでは、子要素を一行、もしくは複数行で並べる時に指定します。
justify-contentは親要素に空きがあった場合、水平方向にどのように並べるのかを指定します。
align-itemsプロパティは親要素に空きスペースがあった場合、子要素を垂直方向にどのように並べるのかを指定します。
align-contentプロパティはflex-wrapで子要素が複数行になった場合、垂直の方向にどのように並べるのかを指定します。

flex-directionプロパティ

子要素を、縦一列、もしくは横一列で並べたいとき、flex-directionを指定します。(directionとは方向の意味)
まずは例を見てみましょう。

See the Pen GRZLLxx by M2RnRT (@m2rnrt) on CodePen.

親要素にcontainerというクラスを付与したdiv要素を設定しました。CSSを見てもらえばわかりますが、display: flex;flex-direction: column;の二つのプロパティを指定しています。columnだと子要素を縦にまっすぐ並べます。ほかに3つの指定できる値があります。

効果
row(デフォルト) 子要素を左から右に並べる
row-reverse 子要素を右から左に並べる
column 子要素を上から下に並べる
column-reverse 子要素を下から上に並べる

 

flex-direction
flex-directionに指定できる4つの値

 

flex-wrapプロパティ

子要素がたくさんある場合、一列の中に納まりきらない場合があります。そんな時はどこかで折り返さなくてはなりません。
その折り返しをするかどうかはflex-wrapプロパティによって決まります。まずは例を見てみましょう。

See the Pen ZEWZZmG by M2RnRT (@m2rnrt) on CodePen.

flex-wrapプロパティに対してwrapを指定すると、子要素が親要素をはみ出すタイミングで自動的に折り返しをしてくれます。wrap以外にも2つ指定方法があるので、見ていきましょう。

効果
nowrap(デフォルト) 折り返しはしない
wrap 左上から順に並べて、親要素をはみ出るところで折り返す
wrap-reverse 左下から並べて、上側に折り返す(wrapの逆)

nowrapという値を指定すれば、一列の中に納まるように配備されます。
wrapかwrap-reverseを指定すれば、ちょうどよいところで折り返しをしてくれます。

flex-wrap
flex-wrapの指定方法と効果

justify-contentプロパティ

子要素を水平方向一列で並べた時に、親要素に空きスペースがあった場合に使用します。
例を見てみましょう。

See the Pen gOrJzQe by M2RnRT (@m2rnrt) on CodePen.

この例では、justify-contentプロパティに対して、space-betweenという値を指定しています。これは、最初と最後の子要素を両端に配置し、残りの要素の配置はその間に均等間隔にします。ほかにも指定できる値があるので、以下に紹介します。

効果
flex-start(デフォルト) 左側に揃えて配置
flex-end 右側に揃えて配置
center 中央に揃えて配置
space-between 右端と左端の子要素を両端に配置して、残りは等間隔でその間に配置する
space-around 全ての子要素を等間隔で配置する
flex justify-content 説明
justify-contentの指定できる値

align-itemsプロパティ

親要素に空きスペースがあった場合、縦方向のどの位置に配置するかをalign-itemsプロパティで指定します。
まず、以下の例を見てください。

See the Pen YzqbRLz by M2RnRT (@m2rnrt) on CodePen.

align-itemプロパティに対して、centerという値が指定されています。これは、親要素の高さに対して、真ん中の位置に子要素を並べるということを指定しているのです。
このほかにも指定できる値があるので、以下に紹介します。

効果
stretch(デフォルト) 親要素の高さに合わせて広げて配置
flex-start 親要素の上の部分から配置
flex-end 親要素の下の部分から開始
center 親要素に対して真ん中の位置に配置
baseline ベースラインでそろえる
free box のalign-items
align-itemsの並べ方

align-contentプロパティ

さいごに、子要素が複数行になった時の配置プロパティであるalign-contentについて紹介します。
子要素が多く、複数行になった時に縦のスペースをどのように使うのかに関するプロパティです。まずは例をご覧ください。

See the Pen BaKeMzv by M2RnRT (@m2rnrt) on CodePen.

align-contentプロパティに対して、space-aroundという値が設定されています。そうすると、縦のラインで均等に空間が埋まるように配置されます。他に適応できる値は以下の通りです。

効果
stretch(デフォルト) 親要素の高さに合わせて広がる
flex-start 上から下にそろうように配置
flex-end 下から上にそろうように配置
center 中央に配置
space-between 最初と最後の行を上下の端に配置し、残りは均等間隔で配置
space-around 均等に間隔をあけて配置
flexbox align-contentの使い方
align-contentの使い方

さいごに

いかがだったでしょうか?Flexboxの便利さが伝わりましたでしょうか。
実は、以前はfloatというプロパティで、子要素の並びは指定されていました。しかし、圧倒的に高機能なFlexboxが現在は主流になっています。

子要素を並べるFlexboxですが、「並ぶ」と聞くと中学生の頃を思い出します。中1の時は背の順で最前列でした。しかし3年間で30センチ伸びて、一気に後ろまで下がったことを覚えています。
そんな感じで、プログラミングも精進していきたいものです。

スポンサーリンク