[CSS練習問題] Flexboxで自由自在に要素を整列しよう

今回はFlexboxを使ったレイアウトの整え方をマスターしたい方のために簡単な練習問題を用意しました。FlexBoxは自由に使いこなせるようになればかなり便利な機能なので、要素の横並びはfloatしか使っていないという方はこの練習問題を機にFlexboxでレイアウトを整えられるようにしてもらえれば幸いです。

Flexboxとは

FlexboxとはCSSによる簡単な指示で親要素をフレックスコンテナ、子要素をフレックスアイテムとしてレイアウトの配置をまとめて行うことができるモジュールです。簡単に言うと、Flexboxの処理をした子要素に対してfloatなどを使わずにまとめて綺麗に配置ができるものになります。

前提として、display:flex(若しくはdisplay:inline-flex)を付けた親要素のことをフレックスコンテナと呼び、フレックスコンテナ内の配置をする子要素のことをフレックスアイテムと呼びます。

それでは練習問題を始めましょう。問題は全部で3問あります。

Q① 折り返しのある要素を上下左右中央に揃える

Flexboxの練習問題①

完成デモ

FlexBoxを使って上の見本画像のようにフレックスコンテナの中に4つずつで折り返すフレックスアイテムを上下左右均等に綺麗に配置してみましょう。

HTMLは用意していますので下からコピーしてご自身のエディタにペーストしてみてください。

↓HTML


<div class="container">
	<p style="width: 100px; height: 100px; background: red; margin: 0 10px;"></p>

	<p style="width: 100px; height: 100px; background: red; margin: 0 10px;"></p>

	<p style="width: 100px; height: 100px; background: red; margin: 0 10px;"></p>

	<p style="width: 100px; height: 100px; background: red; margin: 0 10px;"></p>

	<p style="width: 100px; height: 100px; background: red; margin: 0 10px;"></p>

	<p style="width: 100px; height: 100px; background: red; margin: 0 10px;"></p>

	<p style="width: 100px; height: 100px; background: red; margin: 0 10px;"></p>

	<p style="width: 100px; height: 100px; background: red; margin: 0 10px;"></p>
</div>

続いてCSSも途中までのものを用意していますので、下からコピーしてHTMLに適用させてください。

↓CSS

.container{
display: flex;

/*
こちらにFlexboxのCSSプロパティと値を入力してください。
*/

width:500px;
height: 300px;
border: 1px solid #000;
margin: 0 auto;
}
このままで表示させたら下のような感じになると思います。

Flexboxの練習問題①

この状態から、CSSの4行目から6行目の箇所にFlexBoxのプロパティと値を入れれば、見本の画像のように赤のボックスが4つずつ上下左右均等に綺麗に配置されます。どのようなCSSプロパティと値を親要素のcontainerというクラス名に付ければいいでしょうか?

Q① 折り返しのある要素を上下左右中央に揃える 解説

見本のCSSはこちらになります。

.container{
display: flex;

flex-wrap: wrap; /* 子要素の回り込み */
justify-content: center; /* 左右中央揃え */
align-items: center; /* 上下中央揃え */
-webkit-box-align: center;
-ms-flex-align: center;

width: 500px;
height: 300px;
border: 1px solid #000;
margin: 0 auto;
}

上記のようにCSS4行目~8行目を追加することで見本のように綺麗に要素が配置されることになります。

以下ポイントを解説していきます。

4行目

flex-wrap: wrap; /* 子要素の折り返し */

flex-wrapプロパティはフレックスアイテムに対して、一行で要素を収めるか、子要素の横幅がオーバーした時は複数行に折り返しを許可するかどうかを決めるプロパティです。今回は折り返すようにしたいので、wrapという値にしています。

flex-wrap
nowrap 初期値。フレックスアイテムの横幅にかかわらず一行で表示されます。
wrap フレックスアイテムが横幅を越える場合折り返されます。二行目以降は下方向に左から順に並べられるようになります。
wrap-reverse フレックスアイテムは折り返されますが、wrapとは逆方向の上向きに折り返されていきます。

5行目

justify-content: center; /* 左右中央揃え */

justify-contentプロパティは横方向の配置の仕方を指定します。今回は中央にまとめて揃えたかったのでcenterという値にしています。

justify-content
flex-start 初期値。フレックスアイテムは左から順に詰めて配置されます。
flex-end flex-startとは逆に、右から詰めてフレックスアイテムが配置されます。
center フレックスアイテムを中央にまとめて配置します。
space-between 左右の端に余白を作らずフレックスアイテムを横方向へ均等に配置します。
space-around フレックスアイテムを横方向へ均等に配置します。

6行目

align-items: center; /* 上下中央揃え */

justify-contentは横方向の配置だったのに対して、align-itemsは縦方向の配置を指定します。今回は上下の中央にフレックスアイテムを配置したいので、centerという値にしています。

align-items
stretch 初期値。フレックスアイテムはフレックスコンテナの縦幅に合わせて伸縮されます。
flex-start フレックスコンテナの上端からフレックスアイテムを配置します。
flex-end フレックスコンテナの下端からフレックスアイテムを配置します。
center フレックスコンテナの上下中央にフレックスアイテムを配置します。
baseline フレックスアイテム内のベースラインを揃えた状態で、フレックスコンテナの上端からフレックスアイテムを配置します。

7~8行目

各ブラウザが正常にCSSを認識するために記述するベンダープレフィックスという処理です。

ベンダープレフィックスとは?|HTMLクイックリファレンス

解説は以上になります。


いかがでしたでしょうか?左右の中央揃えは簡単にできても親要素に対する上下の中央揃えは場合によって意外と難しかったりしますが、Flexboxを使えば簡単に実装できます。

Q② 自由自在にフレックスアイテムを配置させる

完成デモ

Flexboxを使って上の画像のように3つのフレックスアイテムを自由自在に配置してみましょう。HTMLは下のコードを利用してください。

↓HTML

<div class="container">
	<p style="width: 100px; height: 100px; background: red; margin: 0 10px;"></p>

	<p style="width: 100px; height: 100px; background: red; margin: 0 10px;"></p>

	<p style="width: 100px; height: 100px; background: red; margin: 0 10px;"></p>
</div>

続いてCSSも途中までのものを用意していますので、下からコピーしてHTMLに適用させてください。

↓CSS

.container{
display: flex;

/*
こちらにFlexboxのCSSプロパティと値を入力してください。
*/

width: 500px;
height: 300px;
border: 1px solid #000;
margin: 0 auto;
}

.container p:nth-of-type(1){
/*
こちらにFlexboxのCSSプロパティと値を入力してください。
*/
}

.container p:nth-of-type(2){
/*
こちらにFlexboxのCSSプロパティと値を入力してください。
*/
}

.container p:nth-of-type(3){
/*
こちらにFlexboxのCSSプロパティと値を入力してください。
*/
}

上の「こちらにFlexboxのCSSプロパティと値を入力してください。」と書かれている箇所にFlexboxのCSSプロパティと値を入れて、見本の画像のようにフレックスアイテムを配置してください。

Q② 自由自在にフレックスアイテムを配置させる 解説

見本画像のようにフレックスアイテムを並べるCSSはこちらになります。

.container{
display: flex;

justify-content: flex-end;
-ms-flex-pack: end;
-webkit-box-pack: end;

width: 500px;
height: 300px;
border: 1px solid #000;
margin: 0 auto;
}

.container p:nth-of-type(1){
align-self: flex-end;
-ms-flex-item-align: end;
}

.container p:nth-of-type(2){
flex-basis: 50px;
-ms-flex-preferred-size: 50px;
}

.container p:nth-of-type(3){
align-self: center;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
}

上のCSSのように記述すると見本画像のようにフレックスアイテムを配置することができます。

以下ポイントを解説していきます。

4行目

フレックスアイテムを横方向に位置指定させるjustify-contentにflex-endを指定することでフレックスアイテム全体を右寄せにします。

15行目

align-selfプロパティはalign-itemsのように縦方向の配置を指定できるプロパティなのですが、align-itemsはフレックスコンテナに指定してフレックスアイテム全体を位置指定するのに対し、align-selfプロパティはフレックスアイテムに指定することで個別のフレックスアイテムに縦方向の位置指定をすることができます。値にflex-endを指定することでフレックスアイテム全体を右寄せにしています。

20行目

flex-basisプロパティはフレックスアイテムに指定することで個別に横幅を指定することができます。

25行目

13行目と同じようにalign-selfにcenterの値を与えることで縦方向を中央揃えにしています。

解説は以上になります。


いかがでしたでしょうか?ここまでしっかりと理解できればFlexboxを使ってある程度自由にレイアウトを組めるようになると思います。

Q③ 横幅によってフレックスアイテムを倍率を変える

完成デモ

最後はレスポンシブデザイン(スマホ対応)で非常に便利な機能を実装できるようにしましょう。完成デモを開いてウインドウの横幅を小さくしたり大きくしたりしてみてください。画面が大きくなった時は3つのフレックスアイテムが左から6:1:3の大きさになっているかと思います。Flexboxを使ってフレックスコンテナの横幅に応じてフレックスアイテムの横幅が変わるレイアウトを組んでみましょう。

HTMLはこちらを利用してください。

↓HTML

<div class="container">
	<p style="width: 100px; height: 100px; background: red; margin: 0 10px;"></p>

	<p style="width: 100px; height: 100px; background: red; margin: 0 10px;"></p>

	<p style="width: 100px; height: 100px; background: red; margin: 0 10px;"></p>
</div>

続いてCSSも途中までのものを用意していますので、下からコピーしてHTMLに適用させてください。

↓CSS

.container{
display: flex;

/*
こちらにFlexboxのCSSプロパティと値を入力してください。
*/

width: 80%;
height: 300px;
border: 1px solid #000;
margin: 0 auto;
}

.container p:nth-of-type(1){
/*
こちらにFlexboxのCSSプロパティと値を入力してください。
*/
}

.container p:nth-of-type(2){
/*
こちらにFlexboxのCSSプロパティと値を入力してください。
*/
}

.container p:nth-of-type(3){
/*
こちらにFlexboxのCSSプロパティと値を入力してください。
*/
}

上の「こちらにFlexboxのCSSプロパティと値を入力してください。」と書かれている箇所にFlexboxのCSSプロパティと値を入れて、見本画像と同じようなレイアウトになるようにしてください。

Q③ 横幅によってフレックスアイテムを倍率を変える 解説

見本画像のようにフレックスアイテムを並べるCSSはこちらになります。

.container{
display: flex;

align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;

width: 80%;
height: 300px;
border: 1px solid #000;
margin: 0 auto;
}

.container p:nth-of-type(1){
flex-grow: 6;
-ms-flex-positive: 6;
-webkit-box-flex: 6;
}

.container p:nth-of-type(2){
flex-grow: 1;
-ms-flex-positive: 1;
-webkit-box-flex: 1;
}

.container p:nth-of-type(3){
flex-grow: 3;
-ms-flex-positive: 3;
-webkit-box-flex: 3;
}

以下ポイントを解説していきます。

4行目

align-items:centerでフレックスアイテム全体を上下中央揃えにしています。

15行目、21行目、27行目

flex-growプロパティはフレックスコンテナの横幅に余白ができた場合、値の数字によって横幅が伸びる指定ができるプロパティになります。フレックスコンテナの左右に余白が無い時は、各フレックスアイテムは横幅100pxで統一されるのですが、フレックスコンテナの左右に余白ができた場合、今回の場合でしたら6:1:3の比率でフレックスコンテナの横幅が伸びるということになります。

解説は以上になります。


Flexboxではフレックスアイテムをただ配置するだけではなく、要素の横幅を調整して配置をすることもできます。レスポンシブデザインを実装する時も非常に便利な機能になるので、ぜひマスターできるようにしておきましょう。

まとめ

今回はFlexboxを使ってレイアウトを綺麗に整える練習問題を紹介させていただきましたがいかがでしたでしょうか?

floatで要素の横並びをするよりも圧倒的に自由度が高く簡単に実装できるFlexboxはこれからのレイアウト作りの当たり前になっていくと思います。プロパティが多く覚えるのは少し時間が掛かるかもしれませんが、その時間以上に作業時間の効率化をしてくれる便利なものなので、自由に使いこなせるようにしていきましょう。

その他のCSS練習問題

[初心者向け練習問題] HTMLとCSSでレイアウトを構成する

[CSS練習問題] hoverでクールなマウスオーバーエフェクトを作ろう

CSSの知識レベルチェック|サクッとできる選択式練習問題をやってみよう!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です