CSSのalign-contentで複数行の配置を制御する方法をわかりやすく解説

2024.09.13
スポンサーリンク

CSSのalign-contentプロパティは、複数行にわたるフレックスボックスやグリッドレイアウトの要素の垂直方向の配置を制御します。このプロパティは、行全体の配置に影響し、align-itemsのように個々のアイテムには影響しません。複数行レイアウトを設計する際に重要な役割を果たします。

justify-contentは横方向の配置であり、align-contentは縦方向の配置である点が異なります。

スポンサーリンク

align-contentの値とその効果

  • flex-start: 行をコンテナの上部に詰めて配置します。
  • flex-end: 行をコンテナの下部に詰めて配置します。
  • center: 行をコンテナの中央にまとめます。
  • space-between: 行の間に均等なスペースを配置しますが、先頭と末尾にはスペースを設けません。
  • space-around: 行の間に均等にスペースを配置し、外側にもスペースを設けます。
  • space-evenly: 行の間とコンテナの外側に均等なスペースを配置します。
  • stretch: 行をコンテナの高さ全体に引き伸ばします（アイテムに高さが指定されていない場合に有効）。

注意点と関連情報

align-contentプロパティは、複数行に分けられたフレックスボックスやグリッドコンテナに適用されます。flex-wrap: wrapが設定されていない場合、このプロパティは機能しません。また、アイテムが1行に収まる場合、align-contentは効果を発揮せず、align-itemsが代わりに使用されます。レイアウト全体を管理する際に役立つプロパティです。

align-contentが効かない理由として考えられること

単一行のレイアウト

align-contentは、複数行のフレックスアイテムに対してのみ効果を発揮します。アイテムが1行に収まっている場合、このプロパティは無視されます。
対策：flex-wrapをwrapに設定して、アイテムを複数行に配置できるようにします。

コンテナに余白がない

align-contentは、コンテナ内に余白がある場合にのみ機能します。コンテナがアイテムにぴったりの高さや幅の場合、余白がなくなり効果を発揮しません。
対策：コンテナに明示的な高さや幅を設定し、余白を作ります。

フレックスコンテナでない

align-contentはフレックスボックスにのみ適用されます。コンテナがフレックスコンテナでない場合、このプロパティは無効です。
対策：コンテナにdisplay: flex;を設定し、フレックスボックスレイアウトを有効にします。

共通するCSSコード

.css-sample-container {
        display: flex;
        flex-wrap: wrap;
        width: 500px;
        height: 250px;
        border: 1px solid #ccc;
        padding: 10px;
        margin-bottom: 40px;
    }
    .css-sample-item {
        width: 180px;
        height: 50px;
        margin: 5px;
        background-color: #f0f0f0;
        border: 1px solid #000;
        text-align: center;
        line-height: 50px;
    }

align-content: flex-start

align-content: flex-startは、行をコンテナの上部に詰めて配置し、下部に余分なスペースを残します。

HTMLコード

<div class="css-sample-container css-sample-align-content-flex-start">
    <div class="css-sample-item">Item 1</div>
    <div class="css-sample-item">Item 2</div>
    <div class="css-sample-item">Item 3</div>
    <div class="css-sample-item">Item 4</div>
    </div>

CSSコード

.css-sample-align-content-flex-start {
    align-content: flex-start;
}

表示結果

Item 1
Item 2
Item 3
Item 4

align-content: flex-end

align-content: flex-endは、行をコンテナの下部に詰めて配置し、上部に余白が残ります。

HTMLコード

<div class="css-sample-container css-sample-align-content-flex-end">
    <div class="css-sample-item">Item 1</div>
    <div class="css-sample-item">Item 2</div>
    <div class="css-sample-item">Item 3</div>
    <div class="css-sample-item">Item 4</div>
    </div>

CSSコード

.css-sample-align-content-flex-end {
    align-content: flex-end;
}

表示結果

Item 1
Item 2
Item 3
Item 4

align-content: center

align-content: centerは、行をコンテナの中央にまとめて配置し、上下に均等な余白を設けます。

HTMLコード

<div class="css-sample-container css-sample-align-content-center">
    <div class="css-sample-item">Item 1</div>
    <div class="css-sample-item">Item 2</div>
    <div class="css-sample-item">Item 3</div>
    <div class="css-sample-item">Item 4</div>
    </div>

CSSコード

.css-sample-align-content-center {
    align-content: center;
}

表示結果

Item 1
Item 2
Item 3
Item 4

align-content: space-between

align-content: space-betweenは、行の間に均等なスペースを配置し、先頭と末尾にはスペースを設けません。

HTMLコード

<div class="css-sample-container css-sample-align-content-space-between">
    <div class="css-sample-item">Item 1</div>
    <div class="css-sample-item">Item 2</div>
    <div class="css-sample-item">Item 3</div>
    <div class="css-sample-item">Item 4</div>
    </div>

CSSコード

.css-sample-align-content-space-between {
    align-content: space-between;
}

表示結果

Item 1
Item 2
Item 3
Item 4

align-content: space-around

align-content: space-aroundは、行の間に均等にスペースを配置し、行の外側にもスペースを設けます。

HTMLコード

<div class="css-sample-container css-sample-align-content-space-around">
    <div class="css-sample-item">Item 1</div>
    <div class="css-sample-item">Item 2</div>
    <div class="css-sample-item">Item 3</div>
    <div class="css-sample-item">Item 4</div>
    </div>

CSSコード

.css-sample-align-content-space-around {
    align-content: space-around;
}

表示結果

Item 1
Item 2
Item 3
Item 4

align-content: space-evenly

align-content: space-evenlyは、行の間とコンテナの外側に均等なスペースを配置します。

HTMLコード

<div class="css-sample-container css-sample-align-content-space-evenly">
    <div class="css-sample-item">Item 1</div>
    <div class="css-sample-item">Item 2</div>
    <div class="css-sample-item">Item 3</div>
    <div class="css-sample-item">Item 4</div>
    </div>

CSSコード

.css-sample-align-content-space-evenly {
    align-content: space-evenly;
}

表示結果

Item 1
Item 2
Item 3
Item 4

align-content: stretch

align-content: stretchは、行をコンテナの高さ全体に引き伸ばして配置します。アイテムに高さが指定されていない場合に効果を発揮します。

HTMLコード

<div class="css-sample-container css-sample-align-content-stretch">
    <div class="css-sample-item">Item 1</div>
    <div class="css-sample-item">Item 2</div>
    <div class="css-sample-item">Item 3</div>
    <div class="css-sample-item">Item 4</div>
    </div>

CSSコード

.css-sample-align-content-stretch {
    align-content: stretch;
}

表示結果

Item 1
Item 2
Item 3
Item 4

まとめ

align-contentプロパティは、複数行にわたるフレックスボックスやグリッドレイアウトにおける行全体の垂直方向の配置を制御します。レイアウトの種類やアイテムの数に応じて適切な値を選択し、効率的なレイアウトを実現できます。align-itemsと合わせて使用することで、より洗練されたデザインを実現しましょう。

スポンサーリンク