シリーズ第20回は、フレックスボックス（flexbox）の2回目です。プロパティを組み合わせてどのようなレイアウトになるか画像付きで解説しています。ゲーム感覚で書いていくうちにフレックスボックスについて理解が深まります。
プロパティを組み合わせる
前回（第19回）では、display: flex; に組み合わせて使える3つのプロパティについて解説しました。
シリーズ第19回は、CSSのフレックスボックス（flexbox）についてです。これを覚えると思い通りにレイアウトができるようになります。ただ奥深い概念なので、この記事では基本的なことを3分で解説します。 これまで、レイアウトの際にfl[…]
以下の3つでしたね。
- flex-direction（主軸）
- justify-content（主軸での配置）
- align-items（交差軸での配置）
今回は、これらをさらに組み合わせてレイアウトについて学んでいきましょう。まずは目標物を先に見て、自分でCSSを記述してみてください。前回で解説した点を実践するイメージです。ブラウザで表示してみて目標物通りならクリアです。わからなかったら記事を読み進め、答えを確認してみましょう。そんなに難しくないと思いますよ。
準備として、今回スタイルをあてるためのベースとなるHTMLとCSSを以下に記します。
HTML：
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<title>プログラミング講座</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="container">
<div class="box box1">１</div>
<div class="box box2">２</div>
<div class="box box3">３</div>
</div>
</body>
</html>
CSS：
.container{
width: 500px;
height: 120px;
background-color: beige;
display: flex;
}
.box{
height: 24px;
width: 100px;
background-color: lightgreen;
border: 1px solid gray;
margin: 3px;
}
基本的には、class名「container」に対して、display: flex; と組み合わせプロパティを複数記述していきます。といっても、上述の3つのプロパティの中からです。最後に応用編で 「box2」だけにスタイルをあててレイアウトしてみたいと思います。
目標物①
justify-content（主軸での配置）
align-items（交差軸での配置）
では、やってみましょう！
答え
justify-content: center;
align-items: center;
が正解です。
画像では、赤囲み部分になります。これは簡単でしたね！
では次です。少し難易度が上がります。
目標物②
flex-direction（主軸）
justify-content（主軸での配置）
では、やってみましょう！
答え
flex-direction: row-reverse;
justify-content: flex-end
が正解です。
数字が横方向で逆になっているのでrow-reverseは分かりやすかったかもしれません。その後のjustify-contentですが、横方向（主軸）がリバースされたため、左に寄せる場合はstartではなくendになる点がポイントですね。軸がリバースされている時には注意が必要です。
では、次です。
目標物③
flex-direction（主軸）
justify-content（主軸での配置）
では、やってみましょう！
答え
flex-direction: column;
justify-content: flex-end
が正解です。
これは少しややこしいですね。。。縦方向へ軸を変えるので flex-direction: column; を使うのは 分かりやすいと思います。この時点で主軸が縦になっています。ですから、主軸での配置を指定するプロパティであるjustify-contentを使うのがポイントです。主軸がどの方向かを理解しておくことが重要ですね。
次はどうでしょうか。
目標物④
flex-direction（主軸）
justify-content（主軸での配置）
align-items（交差軸での配置）
3つのプロパティを使います。やってみましょう！
答え
flex-direction: row-reverse;
justify-content: center;
align-items: flex-end
が正解です。
これまでの知識を生かせば、それほど難しくなかったかもしれませんね。この場合、リバースがかかっていても主軸の方向は変わっていません。そのため、縦方向の配置は交差軸を変更するプロパティalign-itemsでOKです。
目標物⑤
align-self
答え
align-self: flex-end;
が正解です。
画像の赤囲み部分の通り.box2に対して指定します。こうすることで、他のboxとは別個にスタイルを調整できます。
まとめ
初心者もできる！プログラミング基礎講座【第20回】はいかがでしたか。フレックスボックスについて、いくつかのプロパティを組み合わせた時の挙動を確認してきました。こうやって自分でも記述しながら使っていくと、レイアウトの方法についてだんだん覚えていけますね。
次回フレックスボックス（３）では、flex-wrapやorderなど、さらに組み合わせて使えるプロパティをお伝えいたします。次回もお楽しみに！