Flexboxの主要プロパティを使いこなそう

Flexboxの基本はわかりました！でも、もっと細かく配置を調整したいときはどうすればいいんですか？

いいね、次のステップに進む準備ができたね。Flexboxには、要素の配置を細かくコントロールできる強力なプロパティがたくさんあるんだ。

例えば、ボタンを右端に寄せたり、真ん中に集めたりとかですか？

その通り。justify-contentやalign-itemsを使えば、主軸方向や交差軸方向の配置を自由に調整できるよ。それにflex-growなどで要素の伸縮も制御できるんだ。まずは配置の制御から見ていこう。

主軸方向の配置（justify-content）

justify-contentは、フレックスアイテムを主軸方向（デフォルトでは横方向）にどう配置するかを指定するプロパティです。ナビゲーションメニューやボタン配置など、要素の横並びレイアウトで頻繁に使用します。

justify-contentの主な値

実際に試してみよう

以下のコードエディタで、.containerクラスのjustify-contentの値を変更して、アイテムの配置がどのように変わるか試してみてください。

交差軸方向の配置（align-items）

align-itemsは、フレックスアイテムを交差軸方向（主軸が横なら縦方向）にどう配置するかを指定するプロパティです。高さが異なる要素を綺麗に揃えたり、カード内のコンテンツを縦方向で整列させる際に活用します。

align-itemsの主な値

実際に試してみよう

以下のコードエディタで、.containerクラスのalign-itemsの値を変更して、アイテムの垂直方向の配置がどのように変わるか試してみてください。

複数行の配置（align-content）

align-contentは、フレックスアイテムが複数行に折り返されたときの行全体の配置を制御します。

まず、アイテムを複数行に折り返すにはflex-wrap: wrapをコンテナーに指定します。

この複数行レイアウトで、align-contentを使えば行全体の垂直方向の配置を美しく整えることができます。

align-itemsとalign-contentの違いがよくわからないです…

align-itemsは各アイテム個別の配置、align-contentは行全体の配置を制御するんだ。複数行がある場合にのみ効果があるよ。

align-contentの主な値

実際に試してみよう

複数行レイアウトで、align-contentの値を変更して行全体の配置がどのように変わるか試してみてください。

アイテムの伸縮（flex-grow / flex-shrink）

Flexboxでは、アイテムが余白を埋めるように伸びたり、スペース不足時に縮んだりする動作を制御できます。レスポンシブデザインで特に重要な機能です。

flex-grow（伸びる比率）

flex-growは、コンテナーに余白がある場合に、各アイテムがどれだけ伸びるかを指定します。

実際に試してみよう

各アイテムのflex-growの値を変更して、余白の配分がどのように変わるか試してみてください。

flex-shrink（縮む比率）

flex-shrinkは、コンテナーのスペースが不足した場合に、各アイテムがどれだけ縮むかを指定します。

実際に試してみよう

各アイテムのflex-shrinkの値を変更して、縮み方の違いを確認してみてください。

アイテムの基本サイズ（flex-basis）

flex-basisは、アイテムの初期サイズを指定します。widthやheightの代わりに使用することで、より柔軟な制御が可能になります。flex-growやflex-shrinkと組み合わせて使うことで、レスポンシブなレイアウトを実現できます。

flex-basisの主な値

実際に試してみよう

各アイテムのflex-basisの値を変更して、初期サイズの違いを確認してみてください。

flex ショートハンド

flexプロパティは、flex-grow、flex-shrink、flex-basisを一度に指定できる便利なショートハンドです。実務ではこのショートハンドを使用することが推奨されます。

よく使う値

書き方と意味

/* 3つの値を指定 */
flex: <flex-grow> <flex-shrink> <flex-basis>;

/* よく使うパターン */
flex: 1;          /* 余白を均等に分配 */
flex: 2;          /* 他の要素の2倍のスペースを取る */
flex: 0 0 200px;  /* 固定幅200px */

実際のレイアウトでflexショートハンドを使ったサイドバーとメインコンテンツの配置を試してみてください。

個別アイテムの配置（align-self）

align-selfを使うと、特定のアイテムだけ交差軸方向の配置を変更できます。コンテナーのalign-itemsを上書きして、個別に配置を調整したい場合に便利です。

align-selfの主な値

実際に試してみよう

各アイテムのalign-selfの値を変更して、個別に垂直位置を調整できることを確認してみてください。

アイテムの順序（order）

orderプロパティを使うと、HTMLの順序を変えずに表示順序を変更できます。レスポンシブデザインで、デバイスごとに要素の表示順を変えたい場合に特に有効です。

orderの主な値

実際に試してみよう

各アイテムのorderの値を変更して、HTMLの順序と表示順序が異なることを確認してみてください。

<div class="container">
    <div class="item item-1">Item 1</div>
    <div class="item item-2">Item 2</div>
    <div class="item item-3">Item 3</div>
    <div class="item item-4">Item 4</div>
</div>

orderを使えば、スマホで見るときとPCで見るときで、メニューの位置を変えられるんですね！

そうだね。でも注意点として、スクリーンリーダーやキーボード操作では元のHTML順序が使われるから、アクセシビリティを考慮する必要があるよ。

理解度チェッククイズ

それでは、今日学んだ内容を確認するクイズに挑戦してみよう！

.container {
  display: flex;
  ___: center;
}

.container {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  ___: center;
}

.item-1 { order: 0; }
.item-2 { order: ___; }
.item-3 { order: 0; }

まとめ

justify-contentとalign-itemsの組み合わせで、要素を好きな位置に配置できるんですね！複数行の場合はalign-contentも使えるし。

flex-growやflex-shrinkを使えば、レスポンシブなレイアウトが簡単に作れそうです。flexショートハンドで書くとコードもすっきりしますね。

その通り。Flexboxのプロパティを理解すれば、複雑なレイアウトも直感的に実装できるようになるよ。次は実際にこれらのプロパティを組み合わせて、実用的なレイアウトパターンを作ってみよう。