08. FlexboxとGridのレイアウト

この章では、CSSでレイアウトを組む時によく使うFlexboxとGridを学びます。

昔はfloatなどを使って横並びを作ることもありましたが、現代のWeb制作ではFlexboxとGridを使う場面が多いです。

まずは、どちらをどんな時に使うかを理解しましょう。

Flexboxとは

Flexboxは、要素を一方向に並べる時に便利なレイアウト機能です。

横並び、縦並び、中央寄せ、要素間の間隔調整などによく使います。

HTML

<div class="button-list">
    <a class="button" href="#">詳しく見る</a>
    <a class="button" href="#">お問い合わせ</a>
</div>

CSS

.button-list {
    display: flex;
    gap: 16px;
    align-items: center;
}

.button {
    display: inline-block;
    padding: 12px 24px;
    background-color: #005bac;
    color: #fff;
    text-decoration: none;
}

display: flex;を指定した要素をFlexコンテナと呼びます。

その中の子要素が横に並びます。

justify-contentとalign-items

Flexboxでは、justify-contentとalign-itemsをよく使います。

プロパティ	方向
`justify-content`	主軸方向の揃え方
`align-items`	交差軸方向の揃え方

横並びの場合、主軸は横方向、交差軸は縦方向です。

中央寄せ

.box {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 240px;
}

この指定で、子要素を上下左右の中央に配置できます。

中央寄せはよく使うので、Flexboxでの書き方に慣れておきましょう。

flex-direction

flex-directionを使うと、並ぶ方向を変えられます。

縦並び

.stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

columnにすると、子要素が縦に並びます。

縦並びだけなら通常のブロック要素でもできますが、gapで間隔を管理したい時や、揃え方を調整したい時に便利です。

flex-wrap

横並びの要素が増えた時、折り返したい場合はflex-wrapを使います。

折り返し

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

タグ一覧やボタン一覧など、数が変わる要素に向いています。

flex-wrap: wrap;がないと、画面幅が狭い時にはみ出すことがあります。

Gridとは

Gridは、行と列を使って二方向のレイアウトを作る時に便利です。

カード一覧やギャラリーのように、複数列のレイアウトに向いています。

HTML

<div class="card-grid">
    <article class="card">カード1</article>
    <article class="card">カード2</article>
    <article class="card">カード3</article>
</div>

CSS

.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.card {
    padding: 24px;
    border: 1px solid #ddd;
    background-color: #fff;
}

grid-template-columns: repeat(3, 1fr);は、同じ幅の列を3つ作る指定です。

1frは、空いている幅を分け合う単位です。

minmaxとauto-fit

レスポンシブなカード一覧では、minmaxとauto-fitが便利です。

自動で列数を変えるGrid

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}

この指定では、カードの最小幅を240pxにし、入るだけ列を作ります。

画面幅が狭くなると、自動的に列数が減ります。

カード一覧の基本形としてよく使えます。

FlexboxとGridの使い分け

FlexboxとGridは、どちらか片方だけを使うものではありません。

目的に応じて使い分けます。

使いたいこと	向いているもの
ボタンを横に並べる	Flexbox
ナビゲーションを横並びにする	Flexbox
要素を中央寄せする	Flexbox
カード一覧を複数列にする	Grid
ギャラリーを作る	Grid
画面全体の大きな分割	Grid

ざっくり言うと、一方向に並べるならFlexbox、行と列で配置するならGridです。

よくあるレイアウトパターン

実務でよく使うレイアウトを見てみます。

ヘッダー

ロゴとナビゲーションを横並びにします。

HTML

<header class="site-header">
    <a class="site-logo" href="/">Sample</a>
    <nav class="site-nav">
        <a href="/service/">Service</a>
        <a href="/about/">About</a>
        <a href="/contact/">Contact</a>
    </nav>
</header>

CSS

.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
}

.site-nav {
    display: flex;
    gap: 24px;
}

カード一覧

カード一覧はGridで作ると管理しやすいです。

カード一覧

.card-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

画像と文章の横並び

画像と文章の2カラムはGridでもFlexboxでも作れます。

2カラム

.media {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

スマホでは1カラムに切り替えることが多いです。

よくある失敗

横並びにしたい親要素ではなく、子要素にdisplay: flex;を書いている
gapではなく子要素のmarginで複雑に調整している
画面幅が狭い時の折り返しを考えていない
Gridの列数を固定して、スマホではみ出す
高さを無理にそろえようとして内容が切れる

レイアウトが崩れる時は、どの要素が親で、どの要素が子かを確認します。

FlexboxもGridも、親要素に指定することが基本です。

この章のまとめ

Flexboxは一方向の並びや中央寄せに向いている
Gridはカード一覧や複数列のレイアウトに向いている
gapを使うと要素間の余白を管理しやすい
レスポンシブな一覧にはauto-fitとminmaxが便利
レイアウトが崩れたら、親要素と子要素の関係を確認する