独学の人でも大丈夫！CSS Flexboxの使い方を基礎から学べるチュートリアル
Post on:2019年12月5日
sponsors
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コンテナを作成します。
明日は、このブロックとインラインについて勉強します。
スタイルシートは下記の通りです。
|
1 2 3 4 |
.parent { display: flex /* デフォルト */ display: inline-flex } |
8日目: ブロックとインライン
簡単に説明すると、ブロック要素はコンテナの幅全体を占有します。各ブロックは積み重なるので、積み木のように見えます。一方、インライン要素は必要なスペースのみ占有します。そのため、一列に並ぶか、互いに並んでいるように見えます。
9日目: flex-directionプロパティ
flex-directionプロパティは、メイン軸を定義できるプロパティです。
4日目: Flexboxの軸を理解するで、メイン軸は水平でも垂直でもよいと説明したことを思い出してください。メイン軸を水平にしたい場合は行（row）、垂直にした場合いは列（column）と呼びます。
また、5日目: Flexboxの構造を理解するで、メインスタートとメインエンドについて解説しました。rowとcolumnに接尾辞「reverse」を加えると、メインスタートとエンドを逆方向に設定できます。かっこいいですね👍
flex-directionプロパティのスタイルシートは下記の通りです。
|
1 2 3 4 5 6 |
.parent { flex-direction: row /* デフォルト */ flex-direction: row-reverse flex-direction: column flex-direction: column-reverse } |
10日目: flex-wrapプロパティ
flex-wrapプロパティは、コンテナ内のFlexアイテムを複数行に配置できるようにするプロパティです。
デフォルトのnowrapでは、Flexアイテムは一行に収まるように収縮して配置されます。ただし、Flexアイテムのサイズを維持し、コンテナ内の複数行に配置したい場合は、wrapを使用します。
flex-wrapプロパティのスタイルシートは下記の通りです。
|
1 2 3 4 5 |
.parent { flex-wrap: nowrap /* デフォルト */ flex-wrap: wrap flex-wrap: wrap-reverse } |
11日目: flex-flowプロパティ
9日目と10日目で、flex-directionプロパティとflex-wrapプロパティについて学びました。この2つを理解すれば、flex-flowプロパティは簡単です。flex-flowプロパティはこの2つのプロパティのショートハンドです👏
つまり、flex-flowプロパティは2つのプロパティを同時に定義できます。デフォルトはrow nowrapです。もし1つの値しか定義しなかった場合は、定義していない値はデフォルト値になります。
flex-flowプロパティのスタイルシートは下記の通りです。
|
1 2 3 4 5 6 |
.parent { flex-flow: row nowrap /* デフォルト */ flex-flow: <flex-direction> <flex-wrap> flex-flow: <flex-direction> flex-flow: <flex-wrap> } |
12日目: justify-contentプロパティ（rowの場合）
ここからが、Flexboxの楽しいところです。
justify-contentプロパティは、メイン軸に沿って配置を揃えるプロパティです。下記の例ではメイン軸は水平で、flex-directionにはrowが定義されています。
このプロパティは、おそらく最も使用されている親プロパティです。好みのレイアウトを選択するだけで、Flexboxが自動的にレイアウトをおこないます。しかも、レスポンシブにも完全に対応です。ブラウザの幅を拡大・縮小すると、Flexboxはバックグラウンドで計算し、選択したレイアウトが維持されるようにします。
「一度決めれば、あとは勝手にやってくれる」便利なグッズのようなものです🍗
justify-contentプロパティのスタイルシートは下記の通りです。
|
1 2 3 4 5 6 7 8 |
.parent { justify-content: flex-start /* デフォルト */ justify-content: flex-end justify-content: center justify-content: space-around justify-content: space-between justify-content: space-evenly } |
13日目: justify-contentプロパティ（columnの場合）
メイン軸は、垂直にすることもできます。その場合はflex-directionにcolumnを定義します。columnで垂直になると、justify-contentプロパティで同じ値を定義しても下記のように垂直に配置されます。
justify-contentプロパティのスタイルシートは下記の通りです。
|
1 2 3 4 5 6 7 8 9 10 |
.parent { flex-direction: column; justify-content: flex-start /* デフォルト */ justify-content: flex-end justify-content: center justify-content: space-around justify-content: space-between justify-content: space-evenly } |
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プロパティのスタイルシートは下記の通りです。
|
1 2 3 4 5 6 7 |
.parent { align-items: stretch /* デフォルト */ align-items: flex-start align-items: flex-end align-items: center align-items: baseline } |
16日目: baseline
align-itemsプロパティの値のbaselineは、少し注意が必要です。baselineが何であるか確実に理解しておきましょう。
baselineはタイポグラフィやテキストに関係しています。テキストが置かれる仮想の線、ベースラインです。同じサイズのフォントを使用している場合、視覚的な違いはほとんどありません。しかし、サイズが異なる場合、ベースラインがオフになっているため、テキストが凸凹に表示されます。サイズが異なるフォントを同じベースラインに配置されるようにするには、値にbaselineを使用します👍
17日目: align-itemsプロパティ（columnの場合）
次に、クロス軸が水平になっている場合に、Flexアイテムがどのように配置されるかを見てみましょう。つまり、flex-directionにcolumnが定義されている場合です。
align-itemsプロパティのスタイルシートは下記の通りです。
|
1 2 3 4 5 6 7 8 9 |
.parent { flex-direction: column; align-items: stretch /* デフォルト */ align-items: flex-start align-items: flex-end align-items: center align-items: baseline } |
18日目: align-contentプロパティ
Flexアイテムを複数行に配置できるflex-wrapがあったことを思い出してください。align-contentプロパティを使用すると、これらのFlexアイテムの行をクロス軸にどのように整列させるかを定義できます。
align-contentプロパティはラップされたアイテムにのみ適用されるため、Flexアイテムが1行しかない場合は無効になります。
align-contentのスタイルシートは下記の通りです。
|
1 2 3 4 5 6 7 8 |
.parent { align-content: stretch /* デフォルト */ align-content: flex-start align-content: flex-end align-content: center align-content: space-between align-content: space-around } |
19日目: 子要素 Flexアイテムのプロパティ
親要素は終了しました、やったね！
では次に、子要素のプロパティについて解説します。今日は一息入れて、明日から全力でいきましょう🏎
20日目: orderプロパティ
デフォルトでは、Flexアイテムはコードに記述した順序で表示されます。しかし、それを変更したい場合はどうしたらよいでしょうか？
Flexアイテムの順序を変更するには、orderプロパティを使用します🔢
orderのスタイルシートは下記の通りです。
|
1 2 3 4 |
.child { order: 0 /* デフォルト */ order: <number> } |
21日目: flex-growプロパティ
冒頭で、Flexboxはレスポンシブデザインに最適であると述べました。このプロパティは、それが輝くとことです。flex-growプロパティは、Flexアイテムを必要に応じて拡張させることができます。つまり、コンテナに余分な空きスペースがある場合は、指定したFlexアイテムで埋めるように定義することができます。
CSSを学び始めた時、すべてがかなり静的であったことを私は覚えています。しかし、flex-growプロパティは独自の機能を持ち、コンテナに応じてサイズを調整します、すごいことです！ サイズを指定する必要はありません、Flexアイテムは自動的にサイズが調整されます。これは私にとって非常に衝撃的でした🤯
flex-growのスタイルシートは下記の通りです。
|
1 2 3 4 |
.child { flex-grow: 0 /* デフォルト */ flex-grow: <number> } |
22日目: flex-growプロパティの算出方法
flex-growプロパティを使用して空きスペースを拡張できるのは、とても素晴らしいことです。しかし、Flexアイテムの幅を定義していないので、幅のサイズはランダムに見えます。幅がどのように算出されるか見てましょう。
正直なところ、Flexboxを理解するために算出方法を知る必要はありません。ブラウザによって自動的に算出される値です。しかし、どのように算出されているのかを知ることは、理解を深めるのに役立つかもしれません。トリックが分かれば、もうマジックに騙されなくなるのと同じです😉
まずは、HTMLとCSSを見てください。
|
1 2 3 4 5 |
<div class="parent"> <div class="child green"></div> <div class="child yellow"></div> <div class="child blue"></div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.parent { width: 700px; } .child { width: 100px; } .green { flex-grow: 1; } .yellow { flex-grow: 0; } .blue { flex-grow: 3; } |
Step 1: 変数を分類する
幅を算出する基本式は、下記の通りです。
|
1 |
new width = ( (flex grow / total flex grow) x free space) + width |
式に使用されている変数は、それぞれ下記の値を参照しています。
| 変数 | |
|---|---|
| flex grow | CSSから参照 |
| total flex | 計算が必要 |
| free space | 計算が必要 |
| width | CSSから参照 |
Step 2: 分かっていることを記入する
CSSから、次のことが分かります。
- 各子要素のwidthは、100です。
- 親要素（コンテナ）のwidthは、700です。
- 子要素のflex-growは、1,0,3です。
この情報を元に、さきほどの表をアップデートします。
| Green | Yellow | Blue | |
|---|---|---|---|
| flex grow | 1 | 0 | 3 |
| total flex | |||
| free space | |||
| width | 100 | 100 | 100 |
Step 3: 空きスペースの計算
空きスペースの計算式は、下記の通りです。
|
1 |
free space = parent width - total children widths |
さきほど分かったことは、下記の通りです。
- 各子要素のwidthは、100です。
- 親要素（コンテナ）のwidthは、700です。
この情報を使用して「子の合計幅」を計算できます。
|
1 2 3 4 |
total children widths = green + yellow + blue = 100 + 100 + 100 => 300 |
合計幅が分かったので、空きスペースも分かります。
|
1 2 3 4 |
free space = parent width - total children widths = 700 - 300 => 400 |
表をアップデートして、この情報を追加しましょう。
| Green | Yellow | Blue | 合計 | |
|---|---|---|---|---|
| flex grow | 1 | 0 | 3 | |
| total flex | ||||
| free space | - | - | - | 400 |
| width | 100 | 100 | 100 |
Step 4: flex growの合計を計算する
これは簡単です、単純にflex-growを合算します。
|
1 2 3 4 |
total flex grow = green + yellow + blue = 1 + 0 + 3 => 4 |
表をアップデートして、この情報を追加しましょう。
| Green | Yellow | Blue | 合計 | |
|---|---|---|---|---|
| flex grow | 1 | 0 | 3 | 4 |
| free space | - | - | - | 400 |
| width | 100 | 100 | 100 |
Step 5: 新しい幅を計算する
ここで最初の式を使用します。
|
1 |
new width = ( (flex grow / total flex grow) x free space) + width |
a. Green
|
1 2 3 |
new width = ( (1/4 * 400) ) + 100 => 200 |
b. Yellow
|
1 2 3 |
new width = ( (0/4 * 400) ) + 100 => 100 |
c. Blue
|
1 2 3 |
new width = ( (3/4 * 400) ) + 100 => 400 |
これで終わりです！
各Flexアイテムの新しい幅の計算が完了しました。
| Green | Yellow | Blue | 合計 | |
|---|---|---|---|---|
| flex grow | 1 | 0 | 3 | 4 |
| free space | - | - | - | 400 |
| new width | 200 | 100 | 400 |
23日目: flex-shrinkプロパティ
flex-growは余分なスペースがあればそれを埋めるように拡張しました。その反対が、flex-shrinkプロパティです。スペースが不足しているとどうなると思いますか？ その場合に、Flexアイテムが収まるように収縮する量を制御するプロパティです。数値が大きいほど、収縮することに注意してください👍
flex-shrinkのスタイルシートは下記の通りです。
|
1 2 3 4 |
.child { flex-shrink: 1 /* デフォルト */ flex-shrink: <number> } |
24日目: flex-shrinkプロパティの算出方法
22日目と同様に、これもオプションの知識です。もし、flex-shrinkプロパティがどのように計算するか興味があるなら、このうさぎの穴にご一緒しませんか?🐰
flex-shrinkの計算式は、flex-growよりも少し複雑です。既存の比率を考慮し、Flexの収縮量に応じて収縮させる必要があります。したがって、さらにいくつかの計算が必要になります。
繰り返しますが、Flexboxを理解するために算出方法を知る必要はありません。幸いなことに、ブラウザがあなたのために処理してくれます😌
まずは、HTMLとCSSを見てください。
|
1 2 3 4 |
<div class="parent"> <div class="green"></div> <div class="yellow"></div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 |
.parent { width: 800px; } .green { width: 300px; flex-shrink: 4; } .yellow { width: 600px; flex-shrink: 6; } |
Step 1: 変数を分類する
幅を算出する基本式は、下記の通りです。
|
1 |
new width = width - (shrink space x shrink ratio) |
式に使用されている変数は、それぞれ下記の値を参照しています。
| 変数 | |
|---|---|
| width | 計算が必要 |
| shrink space | 計算が必要 |
| shrink ratio | 計算が必要 |
Step 2: 分かっていることを記入する
CSSから、次のことが分かります。
- 親要素（コンテナ）のwidthは、800です。
- Greenの子要素のwidthは300で、flex-shrinkは4です。
- Yellowの子要素のwidthは600で、flex-shrinkは6です。
この情報を元に、さきほどの表をアップデートします。
| Green | Yellow | |
|---|---|---|
| flex shrink | 4 | 6 |
| width | 300 | 600 |
Step 3: 収縮スペースの計算
収縮すべきスペースの計算式は、下記の通りです。
|
1 |
shrunk space = total children widths - parent width |
さきほど分かったことは、下記の通りです。
- 親要素（コンテナ）のwidthは、800です。
- 子要素のwidthは、300と600です。
この情報を使用して「子の合計幅」を計算できます。
|
1 2 3 4 |
total children widths = green + yellow = 300 + 600 => 900 |
合計幅が分かったので、収縮すべきスペースも分かります。
|
1 2 3 4 |
shrunk space = total children widths - parent width = 900 - 800 => 100 |
表をアップデートして、この情報を追加しましょう。
| Green | Yellow | 合計 | |
|---|---|---|---|
| flex shrink | 4 | 6 | |
| width | 300 | 600 | |
| shrunk space | - | - | 100 |
Step 4: 収縮率を計算する
基本式は、下記の通りです。
|
1 |
shrink ratio = (width x flex shrink) / total shrink scaled width |
新しい変数「total shrink scaled width」に注目してください。収縮率を計算するには、最初にこれを計算する必要があります。
Step 4-1: 「total shrink scaled width」を計算する
基本式は、下記の通りです。
|
1 |
total shrink scaled width = Σ(width x flex shrink) |
「Σ」シグマは、何かの総和を意味する数学記号です。そのため、すべての子要素にwidth x flex shrinkを適用する必要があります。
Green
|
1 2 3 |
width x flex shrink = 300 x 4 => 1200 |
Yellow
|
1 2 3 |
width x flex shrink = 600 x 6 => 3600 |
すべての子要素
|
1 2 3 |
total shrink scaled width = 1200 + 3600 => 4800 |
表をアップデートして、この情報を追加しましょう。
| Green | Yellow | 合計 | |
|---|---|---|---|
| flex shrink | 4 | 6 | |
| width | 300 | 600 | |
| shrunk space | - | - | 100 |
| total shrink scaled width | - | - | 4800 |
Step 4-2: 収縮率の計算に戻ります
収縮率の合計幅が分かったので、収縮率の計算に戻ります。
|
1 |
shrink ratio = (width x flex shrink) / total shrink scaled width |
Green
|
1 2 3 |
shrink ratio = (300 x 4) / 4800 => 0.25 |
Yellow
|
1 2 3 |
shrink ratio = (600 x 6) / 4800 => 0.75 |
表をアップデートして、この情報を追加しましょう。
| Green | Yellow | 合計 | |
|---|---|---|---|
| flex shrink | 4 | 6 | |
| width | 300 | 600 | |
| shrunk space | - | - | 100 |
| shrink ratio | 0.25 | 0.75 |
Step 5: 新しい幅を算出する
ここで最初の式を使用します。
|
1 |
new width = width - (shrink space x shrink ratio) |
Green
|
1 2 3 |
new width = 300 - (100 x 0.25) => 275 |
Yellow
|
1 2 3 |
new width = 600 - (100 x 0.75) => 525 |
表をアップデートして、この情報を追加しましょう。
| Green | Yellow | |
|---|---|---|
| flex shrink | 4 | 6 |
| width | 300 | 600 |
| shrink ratio | 0.25 | 0.75 |
| new width | 275 | 525 |
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のスタイルシートは下記の通りです。
|
1 2 3 4 |
.child { flex-basis: auto /* デフォルト */ flex-basis: <width> } |
有効なwidthの値は、<length>と<percentage>です。MDNでいくつかの例を参照し、詳細を読むことができます。
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のスタイルシートは下記の通りです。
|
1 2 3 4 5 6 7 8 |
.child { flex: 0 1 auto /* デフォルト */ flex: <flex-grow> <flex-shrink> <flex-basis> flex: <flex-grow> flex: <flex-basis> flex: <flex-grow> <flex-basis> flex: <flex-grow> <flex-shrink> } |
28日目: align-selfプロパティ
クロス軸に沿ってFlexアイテムを設定できるalign-itemsプロパティを覚えていますか？ 15日目に解説したもので、align-itemsはすべてのFlexアイテムを指定したルールに従って強制的に配置します。しかし、そのうちの1つだけルールを破らせたい場合はどうでしょう。大丈夫です、align-selfがあります。align-selfプロパティは、align-itemsで定義された同じ値をすべて使用できるので、簡単に解除することができます😎
align-selfのスタイルシートは下記の通りです。
|
1 2 3 4 5 6 7 |
.child-1 { align-self: stretch /* デフォルト */ align-self: flex-start align-self: flex-end align-self: center align-self: baseline } |
29日目: まとめ、Flexboxで使用するプロパティ
これでFlexboxのすべてのプロパティを学習しました！
あなたはもうFlexboxの使い手です！ この短い時間で多くの知識を学びました。もし、理解できていないものがあれば、もう一度見直してみてください。この記事を読み返すだけでなく、他のFlexboxのチュートリアルもチェックしてみるとよいでしょう。別の視点を読むことで、知識を固め、ギャップを埋めることができます。
上達する最善の方法は実践することです。あなたは知識を得たので、今後はその知識で何かを構築することができます💪
30日目: まとめ、Flexboxのチートシート
最後に一つ、Flexboxのプロパティをすべて記憶するのは簡単ではありません。私はこのチュートリアルを作成した後でも、これらのプロパティについてすべてを記憶しているわけではありません。優れたプログラマーであるということは、どれだけ記憶するかではなく、問題を解決できるかです。だからこそ、プログラマーは謙虚であり続き、学び続けることが重要なのです。問題に直面したときに、それに対応するために選択できるさまざまなツールがあります🧰
お疲れさまでした！
みなさんが多くのことを学んだことを願っていますし、私の情報をみなさんのプログラミングの旅の一部にしてくれたことに感謝します💛
ボーナス: 自動マージンを使った配置
ボーナスコンテンツです。
Flexboxの子要素を配置するもう1つの方法は、自動マージンを使用することです。これはFlexboxのプロパティではありませんが、Flexboxと非常に関係が深いため、覚えておくと便利です。興味がある方は、私の記事をチェックしてみてください。
参考: Flexbox: Aligning with Auto Margins
sponsors
