Flexbox

4. Flexboxの威力

Flexbox（Flexible Box Layout）は、1次元レイアウト（横並び or 縦並び）のための最強ツールです。
かつては float や table-cell で苦労していた配置が、たった数行で実現できます。
下のプレイグラウンドで、各プロパティの効果をリアルタイムに確認してください。

🎮 Flexbox プレイグラウンド

flex-direction

justify-content (主軸)

align-items (交差軸)

flex-wrap

gap

16px

アイテム数

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 16px;
}

📌 覚えておきたいポイント

display: flex を親要素に指定すると、子要素がFlexアイテムになる
justify-content は主軸（通常は横方向）の配置
align-items は交差軸（通常は縦方向）の配置
flex-direction: column で縦並びにすると、主軸と交差軸が入れ替わる
gap はアイテム間の余白。margin より直感的
flex-wrap: wrap で折り返しが発生する

よくある使用パターン

ナビゲーション

                                    .nav {
                                    display: flex;
                                    justify-content: space-between;
                                    align-items: center;
                                    }
                                

カードレイアウト

                                    .cards {
                                    display: flex;
                                    flex-wrap: wrap;
                                    gap: 1rem;
                                    }
                                