プログラミング ホームページ

フレックスボックス(2)-初心者もできる!プログラミング基礎講座【第20回】

シリーズ第20回は、フレックスボックス(flexbox)の2回目です。プロパティを組み合わせてどのようなレイアウトになるか画像付きで解説しています。ゲーム感覚で書いていくうちにフレックスボックスについて理解が深まります。

 

プロパティを組み合わせる

前回(第19回)では、display: flex; に組み合わせて使える3つのプロパティについて解説しました。

フレックスボックス(1)-初心者もできる!プログラミング基礎講座【第19回】

シリーズ第19回は、CSSのフレックスボックス(flexbox)についてです。これを覚えると思い通りにレイアウトができるようになります。ただ奥深い概念なので、この記事では基本的なことを3分で解説します ...

続きを見る

以下の3つでしたね。

  • flex-direction(主軸)
  • justify-content(主軸での配置)
  • align-items(交差軸での配置)

今回は、これらをさらに組み合わせてレイアウトについて学んでいきましょう。まずは目標物を先に見て、自分でCSSを記述してみてください。前回で解説した点を実践するイメージです。ブラウザで表示してみて目標物通りならクリアです。わからなかったら記事を読み進め、答えを確認してみましょう。そんなに難しくないと思いますよ。

準備として、今回スタイルをあてるためのベースとなるHTMLとCSSを以下に記します。

HTML:

 

CSS:

 

基本的には、class名「container」に対して、display: flex; と組み合わせプロパティを複数記述していきます。といっても、上述の3つのプロパティの中からです。最後に応用編で 「box2」だけにスタイルをあててレイアウトしてみたいと思います。

 

目標物①

目標物はboxが縦軸も横軸も真ん中にきていますね。

使用するプロパティ:2つ

justify-content(主軸での配置)
align-items(交差軸での配置)

では、やってみましょう!

 

答え

 

justify-content: center;
align-items: center;

が正解です。

画像では、赤囲み部分になります。これは簡単でしたね!

では次です。少し難易度が上がります。

 

目標物②

縦方向の変化はないですが、数字が逆になっていますね。

使用するプロパティ:2つ

flex-direction(主軸)
justify-content(主軸での配置)

では、やってみましょう!

 

答え

 

flex-direction: row-reverse;
justify-content: flex-end

が正解です。

数字が横方向で逆になっているのでrow-reverseは分かりやすかったかもしれません。その後のjustify-contentですが、横方向(主軸)がリバースされたため、左に寄せる場合はstartではなくendになる点がポイントですね。軸がリバースされている時には注意が必要です。

では、次です。

 

目標物③

縦方向(交差軸)にboxが並んでいます。しかも全体が一番下にきていますね。軸を変えると、どの方向が主軸になるかがポイントですよ!

使用するプロパティ:2つ

flex-direction(主軸)
justify-content(主軸での配置)

では、やってみましょう!

 

答え

flex-direction: column;
justify-content: flex-end

が正解です。

これは少しややこしいですね。。。縦方向へ軸を変えるので flex-direction: column; を使うのは 分かりやすいと思います。この時点で主軸が縦になっています。ですから、主軸での配置を指定するプロパティであるjustify-contentを使うのがポイントです。主軸がどの方向かを理解しておくことが重要ですね。

次はどうでしょうか。

 

目標物④

縦方向も横方向も調整が必要です。boxの数字が逆になっているのもポイントになりますね。

使用するプロパティ:3つ

flex-direction(主軸)
justify-content(主軸での配置)
align-items(交差軸での配置)

3つのプロパティを使います。やってみましょう!

 

答え

flex-direction: row-reverse;
justify-content: center;
align-items: flex-end

が正解です。

これまでの知識を生かせば、それほど難しくなかったかもしれませんね。この場合、リバースがかかっていても主軸の方向は変わっていません。そのため、縦方向の配置は交差軸を変更するプロパティalign-itemsでOKです。

 

 

目標物⑤

これまでにないスタイルになっています。box2だけが下にきています。これはalign-itemsの個別版のようなプロパティを使います。

使用するプロパティ:1つ

align-self

align-selfは、align-itemsのデフォルトの値に上書きされます。今回の目標物は、box2だけが他と異なる配置になっています。そのため、.box2に対してalign-selfを指定しましょう。値はalign-itmesの時を参考にしてください。

 

答え

align-self: flex-end;

が正解です。

画像の赤囲み部分の通り.box2に対して指定します。こうすることで、他のboxとは別個にスタイルを調整できます。

 

 

まとめ

初心者もできる!プログラミング基礎講座【第20回】はいかがでしたか。フレックスボックスについて、いくつかのプロパティを組み合わせた時の挙動を確認してきました。こうやって自分でも記述しながら使っていくと、レイアウトの方法についてだんだん覚えていけますね。

次回フレックスボックス(3)では、flex-wrapやorderなど、さらに組み合わせて使えるプロパティをお伝えいたします。次回もお楽しみに!

 

  • この記事を書いた人
  • 最新記事

Web Director

コアース・デザインのWebディレクターです。WordPressなどCMSでのホームページ制作やブログ運営にかかわるお役立ち情報を、初心者目線で発信していきます。

-プログラミング, ホームページ

Copyright© コアース・デザインのブログ , 2021 All Rights Reserved.