Flexbox

HTML

フレキシブルボックスレイアウト

Flexコンテナのプロパティ

display: flex で有効になるコンテナ側プロパティ

flex-direction / flex-wrap

.container {
    display: flex; /* または inline-flex */

    /* 主軸の方向 */
    flex-direction: row;            /* → デフォルト */
    flex-direction: row-reverse;    /* ← */
    flex-direction: column;         /* ↓ */
    flex-direction: column-reverse; /* ↑ */

    /* 折り返し */
    flex-wrap: nowrap;              /* 折り返しなし（デフォルト） */
    flex-wrap: wrap;                /* 折り返しあり */
    flex-wrap: wrap-reverse;        /* 逆順で折り返し */

    /* 短縮形 */
    flex-flow: row wrap;
}

justify-content / align-items

.container {
    /* 主軸方向の揃え（水平 ← row の場合） */
    justify-content: flex-start;    /* 左揃え（デフォルト） */
    justify-content: flex-end;      /* 右揃え */
    justify-content: center;        /* 中央揃え */
    justify-content: space-between; /* 両端揃え */
    justify-content: space-around;  /* 均等配置（端に余白半分） */
    justify-content: space-evenly;  /* 均等配置（端も同じ余白） */

    /* 交差軸方向の揃え（垂直 ← row の場合） */
    align-items: stretch;           /* 伸縮（デフォルト） */
    align-items: flex-start;        /* 上揃え */
    align-items: flex-end;          /* 下揃え */
    align-items: center;            /* 中央揃え */
    align-items: baseline;          /* ベースライン揃え */

    /* 複数行の揃え */
    align-content: flex-start | flex-end | center | space-between | stretch;
}

Flexアイテムのプロパティ

個別のアイテムを制御するプロパティ

flex-grow / flex-shrink / flex-basis

.item {
    /* 空きスペースへの伸長比率（デフォルト 0） */
    flex-grow: 1;

    /* スペース不足時の縮小比率（デフォルト 1） */
    flex-shrink: 0; /* 縮まない */

    /* アイテムの基本サイズ */
    flex-basis: auto;   /* コンテンツサイズ（デフォルト） */
    flex-basis: 200px;  /* 固定値 */
    flex-basis: 50%;    /* パーセント */
    flex-basis: 0;      /* flex-growのみで計算 */

    /* 短縮形: flex: grow shrink basis */
    flex: 1;       /* 1 1 0% — 均等分割 */
    flex: 1 1 auto; /* 余白を均等分割しつつ縮小可 */
    flex: none;    /* 0 0 auto — 固定サイズ */
    flex: auto;    /* 1 1 auto */
}

order / align-self

.item {
    /* 表示順序（デフォルト 0、小さいほど前） */
    order: -1; /* 先頭に移動 */
    order: 0;  /* デフォルト */
    order: 1;  /* 後ろに移動 */

    /* 個別の交差軸揃え（align-itemsを上書き） */
    align-self: auto;       /* 親の align-items を継承 */
    align-self: flex-start;
    align-self: flex-end;
    align-self: center;
    align-self: stretch;
    align-self: baseline;
}

よく使うFlexパターン

実務でよく使うレイアウトパターン集

中央配置 / ナビゲーション / カード

/* 完全中央配置 */
.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ヘッダーナビゲーション */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 均等カードグリッド（折り返しあり） */
.card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.card-grid > * {
    flex: 1 1 300px; /* 最小300px、均等分割 */
    max-width: calc(33.333% - 1rem);
}

/* スティッキーフッター */
.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.page main { flex: 1; } /* mainが残り全部を占有 */

基礎

Grid