独学の人でも大丈夫！CSS Flexboxの使い方を基礎から学べるチュートリアル

CSS Flexboxの基礎となる考え方や構造、各プロパティの使い方を一通り学べるチュートリアルを紹介します。チュートリアルはステップ形式で、簡単なものから始まるので独学の人、そして初心者にもオススメです！

30日分のチュートリアルですが、1日分は3分くらいなので、正味1,2時間でCSS Flexboxをマスターできると思います。

Flexbox30 -GitHub
by Samantha Ming

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

1日目: Flexboxとは

Flexboxの前は、レイアウトをするためにfloatを主に使用していました。CSSのデベロッパーは、floatは古い方法で限界があり、フラストレーションが貯まることをよく知っています。

しかし、現在は違います！
レスポンシブ対応の柔軟なレイアウトはもちろん、中央配置などもFlexboxはシンプルで簡単なスタイルシートで実装できます。

2日目: FlexコンテナとFlexアイテム

Flexboxを使用する時は、最初に親と子を決める必要があります。親はFlexコンテナと呼ばれ、その中のすべての子はFlexアイテムと呼ばれます。

3日目: Flexboxは直接の子のみ影響を与える

ここで一つ重要なポイントです、Flexコンテナは直接の子を包むだけです。Flexコンテナは、レイヤーの層を超えて包むことはしません。孫やひ孫との関係もありません。「親」と「直接の子」のみです。

つまり、親子関係があれば、Flexboxを使用できます。したがって、子がその子のFlexコンテナになることもできます。ただし、それは別のFlexコンテナになります。また、祖父母のFlexプロパティは引き継がれません。

このポイントは、Flexboxの仕組みを理解するのに役立つ重要なコンセプトの一つです。そして、このポイントが「なぜFlexboxがうまく機能しないのだろう」という時の解決に役立つこともあります😅

4日目: Flexboxの軸を理解する

Flexboxは、メイン軸とクロス軸の2軸システムで機能します。
メイン軸とは、FlexコンテナにFlexアイテムを配置する方向です。クロス軸とは、そのメイン軸に対して垂直方向の軸です。

数学の授業でやったX軸とY軸を思い出しましたか？ しかし、それは忘れてください。メイン軸には、水平軸と垂直軸のどちらもあります。つまり、X軸が必ずしもメイン軸ではないということです。
繰り返しますが、メイン軸は水平と垂直、どちらにもなります。

5日目: Flexboxの構造を理解する

レイアウトを拡大して、Flexboxの構造を見てましょう。
各軸には、始点と終点があります。メイン軸の場合、始点はメインスタート、終点はメインエンドと呼びます。これはクロス軸も同様に、クロススタートとクロスエンドがあります。Flexアイテムの配置場所を管理するため、このスタートとエンドを把握しておくが重要です。

これでFlexboxの基礎は終わりです。

6日目: 親要素 Flexコンテナのプロパティ

ここまでで、Flexboxは親子関係で動作することが分かったと思います。
Flexboxの親と子にはそれぞれ、CSSの独自のプロパティがあります。そのため、どの要素が親で、どの要素が子であるか理解しておくことが重要です。
では、親要素 Flexコンテナのプロパティから始めましょう🤰

7日目: displayプロパティ

Flexboxを始めるには、最初にFlexコンテナを作成する必要があります。これは親要素のdisplayプロパティにflexを定義するだけです。「display: flex;」と定義するだけで、その中の直接の子はすべてFlexアイテムになります🎊

Flexコンテナには2つのタイプがあります、flexとinline-flexです。「display: flex;」はブロックレベルのFlexコンテナを作成します。「display: inline-flex」はインラインレベルのFlexコンテナを作成します。
明日は、このブロックとインラインについて勉強します。

スタイルシートは下記の通りです。

8日目: ブロックとインライン

簡単に説明すると、ブロック要素はコンテナの幅全体を占有します。各ブロックは積み重なるので、積み木のように見えます。一方、インライン要素は必要なスペースのみ占有します。そのため、一列に並ぶか、互いに並んでいるように見えます。

9日目: flex-directionプロパティ

flex-directionプロパティは、メイン軸を定義できるプロパティです。
4日目: Flexboxの軸を理解するで、メイン軸は水平でも垂直でもよいと説明したことを思い出してください。メイン軸を水平にしたい場合は行（row）、垂直にした場合いは列（column）と呼びます。

また、5日目: Flexboxの構造を理解するで、メインスタートとメインエンドについて解説しました。rowとcolumnに接尾辞「reverse」を加えると、メインスタートとエンドを逆方向に設定できます。かっこいいですね👍

flex-directionプロパティのスタイルシートは下記の通りです。

10日目: flex-wrapプロパティ

flex-wrapプロパティは、コンテナ内のFlexアイテムを複数行に配置できるようにするプロパティです。

デフォルトのnowrapでは、Flexアイテムは一行に収まるように収縮して配置されます。ただし、Flexアイテムのサイズを維持し、コンテナ内の複数行に配置したい場合は、wrapを使用します。

flex-wrapプロパティのスタイルシートは下記の通りです。

11日目: flex-flowプロパティ

9日目と10日目で、flex-directionプロパティとflex-wrapプロパティについて学びました。この2つを理解すれば、flex-flowプロパティは簡単です。flex-flowプロパティはこの2つのプロパティのショートハンドです👏

つまり、flex-flowプロパティは2つのプロパティを同時に定義できます。デフォルトはrow nowrapです。もし1つの値しか定義しなかった場合は、定義していない値はデフォルト値になります。

flex-flowプロパティのスタイルシートは下記の通りです。

12日目: justify-contentプロパティ（rowの場合）

ここからが、Flexboxの楽しいところです。
justify-contentプロパティは、メイン軸に沿って配置を揃えるプロパティです。下記の例ではメイン軸は水平で、flex-directionにはrowが定義されています。

このプロパティは、おそらく最も使用されている親プロパティです。好みのレイアウトを選択するだけで、Flexboxが自動的にレイアウトをおこないます。しかも、レスポンシブにも完全に対応です。ブラウザの幅を拡大・縮小すると、Flexboxはバックグラウンドで計算し、選択したレイアウトが維持されるようにします。
「一度決めれば、あとは勝手にやってくれる」便利なグッズのようなものです🍗

justify-contentプロパティのスタイルシートは下記の通りです。

13日目: justify-contentプロパティ（columnの場合）

メイン軸は、垂直にすることもできます。その場合はflex-directionにcolumnを定義します。columnで垂直になると、justify-contentプロパティで同じ値を定義しても下記のように垂直に配置されます。

justify-contentプロパティのスタイルシートは下記の通りです。

14日目: space-aroundとspace-evenlyの違い

justify-contentプロパティのspace-aroundとspace-evenlyの違いに気がつきましたか？ space-evenlyは、Flexアイテム間の空きスペースは常に等間隔です。しかし、space-aroundは、内側のアイテムだけが等間隔になり、最初と最後のアイテムの外側は半分のスペースになります。space-aroundの方がより広がって配置されているように見えます。きゅっと詰まったレイアウトの方が好き、という人がいるかもしれないですね😂

15日目: align-itemsプロパティ（rowの場合）

justify-contentプロパティは、メイン軸にFlexアイテムがどのようにレイアウトされるかを定義するものでした。クロス軸はどうすればよいでしょうか？ 心配する必要はありません、align-itemsプロパティはクロス軸に沿って配置を揃えるプロパティです。

クロス軸は常に、メイン軸に対して垂直です。つまり、メイン軸が水平の場合は、flex-directionにはrowが定義されています。そして、クロス軸は垂直になります。
基本的なことはゆっくり学んでいきましょう、知識はすべて応用できます🤓

align-itemsプロパティのスタイルシートは下記の通りです。

16日目: baseline

align-itemsプロパティの値のbaselineは、少し注意が必要です。baselineが何であるか確実に理解しておきましょう。

baselineはタイポグラフィやテキストに関係しています。テキストが置かれる仮想の線、ベースラインです。同じサイズのフォントを使用している場合、視覚的な違いはほとんどありません。しかし、サイズが異なる場合、ベースラインがオフになっているため、テキストが凸凹に表示されます。サイズが異なるフォントを同じベースラインに配置されるようにするには、値にbaselineを使用します👍

17日目: align-itemsプロパティ（columnの場合）

次に、クロス軸が水平になっている場合に、Flexアイテムがどのように配置されるかを見てみましょう。つまり、flex-directionにcolumnが定義されている場合です。

align-itemsプロパティのスタイルシートは下記の通りです。

18日目: align-contentプロパティ

Flexアイテムを複数行に配置できるflex-wrapがあったことを思い出してください。align-contentプロパティを使用すると、これらのFlexアイテムの行をクロス軸にどのように整列させるかを定義できます。

align-contentプロパティはラップされたアイテムにのみ適用されるため、Flexアイテムが1行しかない場合は無効になります。

align-contentのスタイルシートは下記の通りです。

19日目: 子要素 Flexアイテムのプロパティ

親要素は終了しました、やったね！
では次に、子要素のプロパティについて解説します。今日は一息入れて、明日から全力でいきましょう🏎

20日目: orderプロパティ

デフォルトでは、Flexアイテムはコードに記述した順序で表示されます。しかし、それを変更したい場合はどうしたらよいでしょうか？
Flexアイテムの順序を変更するには、orderプロパティを使用します🔢

orderのスタイルシートは下記の通りです。

21日目: flex-growプロパティ

冒頭で、Flexboxはレスポンシブデザインに最適であると述べました。このプロパティは、それが輝くとことです。flex-growプロパティは、Flexアイテムを必要に応じて拡張させることができます。つまり、コンテナに余分な空きスペースがある場合は、指定したFlexアイテムで埋めるように定義することができます。

CSSを学び始めた時、すべてがかなり静的であったことを私は覚えています。しかし、flex-growプロパティは独自の機能を持ち、コンテナに応じてサイズを調整します、すごいことです！ サイズを指定する必要はありません、Flexアイテムは自動的にサイズが調整されます。これは私にとって非常に衝撃的でした🤯

flex-growのスタイルシートは下記の通りです。

22日目: flex-growプロパティの算出方法

flex-growプロパティを使用して空きスペースを拡張できるのは、とても素晴らしいことです。しかし、Flexアイテムの幅を定義していないので、幅のサイズはランダムに見えます。幅がどのように算出されるか見てましょう。

正直なところ、Flexboxを理解するために算出方法を知る必要はありません。ブラウザによって自動的に算出される値です。しかし、どのように算出されているのかを知ることは、理解を深めるのに役立つかもしれません。トリックが分かれば、もうマジックに騙されなくなるのと同じです😉

23日目: flex-shrinkプロパティ

flex-growは余分なスペースがあればそれを埋めるように拡張しました。その反対が、flex-shrinkプロパティです。スペースが不足しているとどうなると思いますか？ その場合に、Flexアイテムが収まるように収縮する量を制御するプロパティです。数値が大きいほど、収縮することに注意してください👍

flex-shrinkのスタイルシートは下記の通りです。

24日目: flex-shrinkプロパティの算出方法

22日目と同様に、これもオプションの知識です。もし、flex-shrinkプロパティがどのように計算するか興味があるなら、このうさぎの穴にご一緒しませんか?🐰

flex-shrinkの計算式は、flex-growよりも少し複雑です。既存の比率を考慮し、Flexの収縮量に応じて収縮させる必要があります。したがって、さらにいくつかの計算が必要になります。
繰り返しますが、Flexboxを理解するために算出方法を知る必要はありません。幸いなことに、ブラウザがあなたのために処理してくれます😌

25日目: flex-basisプロパティ

flex-growとflex-shrinkを使用すると、Flexアイテムのサイズが変化することが分かりました。flex-basisは、初期サイズを定義するプロパティです。つまり、flex-basisプロパティはFlexアイテムの幅と考えることができます。

では、widthとflex-basisの違いは何でしょうか？ もちろん、widthはそのまま使用することができ、機能します。widthが機能する理由は、flex-basisを定義しなかった場合にデフォルトの幅として使用されるからです。したがって、ブラウザは常にサイズを参照するためにflex-basisの値を見つけようとします。もし見つからなければ、widthの値を適用します。ブラウザに余計な仕事をさせないでください。Flexboxを適切な方法で使用するためにも、flex-basisプロパティを使用してください。

上記の計算式でwidthを参照していたことに気がつくかもしれません。その時点ではまだflex-basisを説明していなかったからです。したがって、Flexを正確にしたい場合はwidthをflex-basisに置き換えてください😝

flex-basisのスタイルシートは下記の通りです。

有効なwidthの値は、<length>と<percentage>です。MDNでいくつかの例を参照し、詳細を読むことができます。

• MDN: <length>
• MDN: <percentage>

26日目: flex-basisとwidth

Flexアイテムにwidthとflex-basisの両方が定義されていると、どちらが優先されるか明確に分かります。ブラウザでは常にflex-basisで定義された値が使用されます。繰り返しになりますが、Flexboxを適切な方法で使用してください😉

ただし、min-widthとmax-widthを定義する場合は注意が必要です。この場合は、flex-basisの優先度が下がります。

27日目: flexプロパティ

flex-grow, flex-shrink, flex-basisを個別に定義するのは、面倒です。心配しないでください。これら3つのプロパティをまとめて定義できるのが、flexプロパティです。flexプロパティのもう一つの利点は、3つすべての値を定義する必要がないことです。必要のないプロパティは飛ばして、必要なプロパティのみ定義できます。飛ばした値はデフォルト値が使用されます。便利ですね👍

flexのスタイルシートは下記の通りです。

28日目: align-selfプロパティ

クロス軸に沿ってFlexアイテムを設定できるalign-itemsプロパティを覚えていますか？ 15日目に解説したもので、align-itemsはすべてのFlexアイテムを指定したルールに従って強制的に配置します。しかし、そのうちの1つだけルールを破らせたい場合はどうでしょう。大丈夫です、align-selfがあります。align-selfプロパティは、align-itemsで定義された同じ値をすべて使用できるので、簡単に解除することができます😎

align-selfのスタイルシートは下記の通りです。

29日目: まとめ、Flexboxで使用するプロパティ

これでFlexboxのすべてのプロパティを学習しました！
あなたはもうFlexboxの使い手です！ この短い時間で多くの知識を学びました。もし、理解できていないものがあれば、もう一度見直してみてください。この記事を読み返すだけでなく、他のFlexboxのチュートリアルもチェックしてみるとよいでしょう。別の視点を読むことで、知識を固め、ギャップを埋めることができます。

上達する最善の方法は実践することです。あなたは知識を得たので、今後はその知識で何かを構築することができます💪

30日目: まとめ、Flexboxのチートシート

最後に一つ、Flexboxのプロパティをすべて記憶するのは簡単ではありません。私はこのチュートリアルを作成した後でも、これらのプロパティについてすべてを記憶しているわけではありません。優れたプログラマーであるということは、どれだけ記憶するかではなく、問題を解決できるかです。だからこそ、プログラマーは謙虚であり続き、学び続けることが重要なのです。問題に直面したときに、それに対応するために選択できるさまざまなツールがあります🧰

お疲れさまでした！
みなさんが多くのことを学んだことを願っていますし、私の情報をみなさんのプログラミングの旅の一部にしてくれたことに感謝します💛

ボーナス: 自動マージンを使った配置

ボーナスコンテンツです。
Flexboxの子要素を配置するもう1つの方法は、自動マージンを使用することです。これはFlexboxのプロパティではありませんが、Flexboxと非常に関係が深いため、覚えておくと便利です。興味がある方は、私の記事をチェックしてみてください。
参考: Flexbox: Aligning with Auto Margins