Flexboxとは何か

Flexbox（フレックスボックス）は、要素を横並び・縦並びに簡単に配置できるCSSの仕組みです。「display: flex」を親要素に指定するだけで有効になります。

AURELIONのナビゲーション（ロゴが中央、左右にリンクが並ぶレイアウト）は、Flexboxなしでは実現がとても難しいです。

AURELIONのナビゲーションコード

まずHTMLの構造を見てみましょう。

HTMLindex.html より
<nav id="nav">
    /* 左側のリンク群 */
    <ul class="nav-links">
        <li><a href="collections.html">Collections</a></li>
        <li><a href="heritage.html">Heritage</a></li>
        <li><a href="savoir-faire.html">Savoir-Faire</a></li>
    </ul>

    /* 中央のロゴ */
    <a href="index.html" class="nav-logo">Aurelion</a>

    /* 右側のリンク群 */
    <ul class="nav-right">
        <li><a href="boutiques.html">Boutiques</a></li>
        <li><a href="journal.html">Journal</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

nav要素の直接の子は3つ：左リンクリスト・ロゴ・右リンクリスト。この3つをFlexboxで横並びに配置しています。

navのCSSを読む

CSSindex.html より
nav {
    position: fixed;           /* 画面上部に固定（後の記事で詳解） */
    top: 0; left: 0; right: 0;

    /* ▼ Flexboxの設定 */
    display: flex;             /* Flexbox有効化 */
    align-items: center;       /* 縦方向：中央揃え */
    justify-content: space-between; /* 横方向：両端に配置 */

    padding: 28px 60px;        /* 内側の余白 */
}

実際の見た目

nav-links（左） nav-logo（中央） nav-right（右）
justify-content: space-between → 3つの要素が両端と中央に配置される

主要なFlexboxプロパティ

display: flex

これを指定した要素がフレックスコンテナになり、直接の子要素がFlexboxの影響を受けます。

justify-content（横方向）

CSS
justify-content: flex-start;    /* 左揃え（デフォルト） */
justify-content: center;        /* 中央揃え */
justify-content: flex-end;      /* 右揃え */
justify-content: space-between; /* 両端に配置、間隔均等 ← Navで使用 */
justify-content: space-around;  /* 全要素の周りに均等余白 */

align-items（縦方向）

CSS
align-items: stretch;   /* 高さを伸ばす（デフォルト） */
align-items: center;    /* 縦方向の中央揃え ← Navで使用 */
align-items: flex-start; /* 上揃え */
align-items: flex-end;   /* 下揃え */

gap（要素間の余白）

リンク同士の間隔は gap で指定しています。

CSSindex.html より
.nav-links {
    display: flex;
    gap: 40px;          /* リンク間を40pxあける */
    list-style: none;   /* リストの点を消す */
}

Flexboxのデフォルト方向

Flexboxはデフォルトで横方向（row）に並びます。縦に並べたい場合は flex-direction: column を使います。

CSS
flex-direction: row;     /* 横並び（デフォルト） ← Navはこれ */
flex-direction: column;  /* 縦並び */
Flexbox vs Grid

Flexboxは「1方向（横か縦）」のレイアウトに向いています。Navのような横一列のメニューはFlexboxが最適。縦横の2次元グリッドにはCSS Gridを使います（次の記事で解説）。

まとめ