Flexbox（フレックスボックス）とは？

Webページのレイアウトを作るための現代的な手法です。昔は「float」というプロパティを使って無理やり横並びを作っていましたが、Flexboxの登場で「横並び」「均等配置」「上下中央揃え」などが驚くほど簡単にできるようになりました。

基本：display: flex

まずは、並べたい要素たちを囲んでいる「親要素（コンテナ）」に `display: flex;` を指定します。これだけで、子要素たちは自動的に横一列に並びます。

.container {
    display: flex;
    /* これだけで子要素が横並びになる */
}

1. 並ぶ向きを変える (flex-direction)

横並びだけでなく、縦並びや逆順にもできます。スマホ対応で「PCでは横、スマホでは縦」にする時によく使います。

• `row`: 左から右へ（デフォルト）
• `column`: 上から下へ
• `row-reverse`: 右から左へ
• `column-reverse`: 下から上へ

2. 横方向の配置 (justify-content)

要素の間に隙間を空けたり、中央に寄せたりします。

.container {
    justify-content: center;      /* 中央揃え */
    justify-content: space-between; /* 両端に配置し、間を均等に */
    justify-content: space-around;  /* 周囲に均等なスペース */
}

3. 縦方向の配置 (align-items)

これがFlexboxの強力な機能です。高さを気にせず、簡単に「上下中央揃え」ができます。

.container {
    align-items: center;    /* 上下中央 */
    align-items: flex-start; /* 上揃え */
    align-items: flex-end;   /* 下揃え */
    align-items: stretch;    /* 高さを親に合わせる（デフォルト） */
}

4. 折り返し (flex-wrap)

デフォルトでは、要素が増えても無理やり一行に収めようとしますが、`flex-wrap: wrap;` を指定すると、幅が足りない時に次の行へ折り返してくれます。

便利な新機能：gap

要素と要素の間の「隙間」を指定します。以前はmarginで調整していましたが、gapなら「要素間だけ」にスペースが入るので非常に便利です。

.container {
    display: flex;
    gap: 20px; /* 要素の間隔を20pxにする */
}

まとめ

Flexboxは、現代のWebデザインに必須のスキルです。「display: flex」「justify-content」「align-items」の3つを覚えるだけで、ほとんどの基本レイアウトは作れるようになります。