【CSS】Flexboxを完全マスター！基本から応用まで徹底

Flexbox（フレックスボックス）は、CSSでレイアウトを柔軟に制御できる強力な機能です。この記事では、基本から応用まで詳しく解説します。

1. Flexboxの基本

1-1. display: flex; でFlexコンテナを作る

.container {
    display: flex;
}

Flexboxを適用するには、親要素に display: flex; を指定します。
これにより、子要素が「フレックスアイテム」となり、自由に配置できます。

2. Flexboxの主なプロパティ

2-1. flex-direction（並び方向）

.container {
    flex-direction: row; /* 横並び（デフォルト） */
    flex-direction: column; /* 縦並び */
}

• row：左から右へ並ぶ
• column：上から下へ並ぶ

2-2. justify-content（横方向の揃え方）

.container {
    justify-content: flex-start;  /* 左揃え（デフォルト） */
    justify-content: center;      /* 中央揃え */
    justify-content: flex-end;    /* 右揃え */
    justify-content: space-between; /* 両端揃え（均等配置） */
    justify-content: space-around;  /* 均等配置（余白あり） */
}

2-3. align-items（縦方向の揃え方）

.container {
    align-items: flex-start; /* 上揃え */
    align-items: center;     /* 中央揃え */
    align-items: flex-end;   /* 下揃え */
}

2-4. flex-wrap（折り返し設定）

.container {
    flex-wrap: nowrap;   /* 折り返さない（デフォルト） */
    flex-wrap: wrap;     /* 折り返す */
}

3. 応用例

3-1. ナビゲーションメニューを作る

<nav class="nav">
    <ul class="nav-list">
        <li>ホーム</li>
        <li>サービス</li>
        <li>お問い合わせ</li>
    </ul>
</nav>

.nav-list {
    display: flex;
    justify-content: space-around;
    list-style: none;
    padding: 0;
}

3-2. グリッド風のレイアウト

.grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.item {
    flex: 1 1 calc(33.333% - 10px); /* 3列レイアウト */
}

4. まとめ

Flexboxを活用すると、複雑なレイアウトも簡単に実装できます。ぜひ活用して、効率的なWebデザインを作成しましょう！