子要素（フレックスアイテム）の個性を引き出す魔法

1. order – 整列番号、はいっ！表示順序の魔法

アイテムたちがHTMLに書かれた順番通りに並ぶのが普通だけど、このorderプロパティを使えば、見た目の表示順序を自由自在に変えることができるんだ！ デフォルト値は0で、数値が小さいほど前に表示される。マイナスの値も使えるよ。

.item-A { order: 1; }
.item-B { order: 2; }
.item-C { order: -1; } /* item-Cが一番前に表示される！ */

注意点！ orderで見た目の順序を変えても、HTMLの構造上の順序（DOMの順序）は変わらないんだ。だから、キーボード操作（Tabキーでの移動など）やスクリーンリーダーの読み上げ順序はHTMLの順序のままになる。視覚的な順序と論理的な順序が大きく異なると、混乱を招くことがあるから、使いどころには注意しようね。

2. flex-grow – のびのび育て！スペース争奪戦 (アイテムの伸長係数)

フレックスコンテナの中に余白があるとき、アイテムたちがその余白をどれくらいの割合で分け合って伸びるかを決めるのが、このflex-growプロパティだよ。 デフォルト値は0で、これは「伸びない」という意味。1以上の正の数を指定すると、その数値の比率に応じて余剰スペースを獲得して大きくなるんだ。

.item-1 { flex-grow: 1; } /* 余白の1/3をゲット */
.item-2 { flex-grow: 2; } /* 余白の2/3をゲット */
.item-3 { flex-grow: 0; } /* 伸びない */

3. flex-shrink – ぎゅーっと縮んで！スペース譲り合い (アイテムの収縮係数)

今度は逆。アイテムの合計サイズがコンテナのサイズを超えてしまって、スペースが足りないときに、どのアイテムがどれくらいの割合で縮むかを決めるのがflex-shrinkだよ。 デフォルト値は1で、これは「縮む」という意味。0を指定すると、そのアイテムは縮まなくなるんだ（はみ出すかもしれないけどね！）。

.item-1 { width: 200px; flex-shrink: 1; } /* 他のアイテムと同じ割合で縮む */
.item-2 { width: 200px; flex-shrink: 0; } /* 縮まない！ */
.item-3 { width: 200px; flex-shrink: 2; } /* 他のアイテムより2倍縮みやすい */

4. flex-basis – これが私の基本サイズ！ (アイテムの初期サイズ)

flex-basisは、アイテムがflex-growやflex-shrinkによって伸び縮みする「前」の、理想的な「基本の大きさ」を指定するんだ。 主軸方向のサイズ（flex-directionがrowなら幅、columnなら高さ）を指定するよ。

• auto (初期値): アイテムのwidthやheightプロパティの値、もしくはコンテンツ自身のサイズが使われる。
• 具体的な長さ (例: 100px, 10em, 30%): その長さを基本サイズとする。
• content: (比較的新しいキーワード) アイテムのコンテンツに基づいて自動的にサイズが決まる。

もしwidth (またはheight) とflex-basisの両方が指定されたら、基本的にはflex-basisの方が優先されることが多いんだ。

5. flex – 三位一体！究極変身！ (flex-grow, flex-shrink, flex-basisの一括指定)

これまで学んだflex-grow、flex-shrink、flex-basisの３つのプロパティを、たった一つでまとめて指定できる超便利なショートハンドが、このflexプロパティだ！

値の書き方はいろいろあるけど、よく使うのはこんな感じ。

• flex: [flex-growの値] [flex-shrinkの値] [flex-basisの値]; (3つの値を指定)
  例: flex: 1 1 100px;
• flex: [flex-growの値] [flex-shrinkの値]; (2つの値を指定。flex-basisは0%になる)
  例: flex: 1 1; (これはflex: 1 1 0%;と同じ)
• flex: [flex-growの値] [flex-basisの値]; (2つの値を指定。flex-shrinkは1になる)
  例: flex: 1 100px; (これはflex: 1 1 100px;と同じ)
• flex: [flex-growの値]; (1つの値を指定。flex-shrinkは1、flex-basisは0%になる)
  例: flex: 1; (これはflex: 1 1 0%;と同じ。アイテムが余剰スペースを均等に分け合うのによく使う！)

他にもキーワード値があるよ。

• flex: initial; (0 1 auto と同じ。アイテムは必要なら縮むけど、伸びない。)
• flex: auto; (1 1 auto と同じ。アイテムは必要なら伸び縮みする。サイズはコンテンツやwidth/heightに基づく。)
• flex: none; (0 0 auto と同じ。アイテムは伸び縮みしない。固定サイズにしたいときに便利。)

6. align-self – 私だけはこうしたいの！ (アイテム個別の交差軸方向の揃え)

親のフレックスコンテナに設定したalign-items（交差軸の揃え方）の指示を、「私だけは違う揃え方がいいな！」と上書きできるのが、このalign-selfプロパティだ。 指定できる値はalign-itemsと同じだよ (auto, stretch, flex-start, flex-end, center, baseline)。

• auto (初期値): 親のalign-itemsの値に従う。

.container {
  display: flex;
  align-items: flex-start; /* 全てのアイテムは基本的に上端揃え */
  height: 150px;
}
.special-item {
  align-self: center; /* でも、このアイテムだけは中央揃え！ */
}