CSSのalign-selfでフレックスボックスやグリッド内の要素の垂直配置を個別に制御する方法を解説

CSSのalign-selfプロパティは、フレックスボックスやグリッドレイアウトにおける各要素の垂直方向の配置を制御します。このプロパティは、親要素に設定されたalign-itemsを上書きして、個別の要素に異なる配置を指定する場合に役立ちます。

align-selfの値とその効果

• auto: 要素は親のalign-itemsプロパティの値に従います。
• flex-start: 要素をコンテナの上端に揃えます。
• flex-end: 要素をコンテナの下端に揃えます。
• center: 要素をコンテナの中央に揃えます。
• baseline: 要素を基準線に沿って揃えます。
• stretch: 要素をコンテナの高さに引き伸ばします（アイテムに明示的な高さが指定されていない場合に有効）。

注意点と関連情報

align-selfプロパティは、各要素に対して個別に適用され、親要素に設定されたalign-itemsの値を上書きします。特に、stretchの値は、要素に高さが指定されていない場合にのみ機能します。align-selfのデフォルト値はautoであり、親のalign-itemsプロパティに従います。

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

フレックスコンテナが正しく設定されていない

align-selfはフレックスボックスまたはグリッドコンテナ内でのみ機能します。display: flex;やdisplay: grid;が設定されていない場合、このプロパティは無効です。
対策：コンテナにdisplay: flex;またはdisplay: grid;を設定して、正しいレイアウトを有効にします。

子要素の高さがコンテナの高さに収まっている

子要素がコンテナの高さにピッタリ収まっている場合、align-selfの垂直配置効果が目に見えないことがあります。
対策：コンテナの高さを調整して、垂直方向に余裕を持たせます。

子要素がabsolute指定されている

子要素にposition: absolute;が設定されていると、align-selfは機能しません。絶対配置はフレックスレイアウトの影響を受けないためです。
対策：position: absolute;を使用せずに、フレックスレイアウトを利用して要素を配置します。

align-itemsで上書きされている

親コンテナでalign-itemsが指定されている場合、align-selfの設定が無効になることがあります。
対策：親コンテナのalign-itemsの設定を確認し、必要に応じてalign-selfの優先度を高くします。

共通するCSSコード

.css-sample-container {
        display: flex;
        width: 600px;
        height: 300px;
        border: 1px solid #ccc;
        padding: 10px;
        margin-bottom: 40px;
        background-color: #f9f9f9;
    }
    .css-sample-item {
        width: 150px;
        margin: 10px;
        background-color: #e0e0e0;
        border: 1px solid #000;
        text-align: center;
        line-height: 50px;
        font-size: 16px;
    }
    

align-self: auto

align-self: autoは、要素が親コンテナのalign-itemsプロパティの設定に従うことを意味します。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-item css-sample-align-self-auto">Item 1</div>
    <div class="css-sample-item">Item 2</div>
    </div>

CSSコード

.css-sample-align-self-auto {
    align-self: auto;
}

表示結果

align-self: flex-start

align-self: flex-startは、要素をコンテナの上端に揃えます。ほかの要素とは異なる位置に配置する際に使用します。

HTMLコード

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

CSSコード

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

表示結果

align-self: flex-end

align-self: flex-endは、要素をコンテナの下端に揃えます。要素を他の要素とは異なる下部に配置したい場合に使用します。

HTMLコード

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

CSSコード

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

表示結果

align-self: center

align-self: centerは、要素をコンテナの中央に揃えます。上下に均等な余白を残し、中央に要素を配置します。

HTMLコード

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

CSSコード

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

表示結果

align-self: baseline

align-self: baselineは、要素を基準線に揃えます。テキストの基準線を他の要素と揃える際に使用します。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-item css-sample-align-self-baseline">Item 1</div>
    <div class="css-sample-item">Item 2</div>
    </div>

CSSコード

.css-sample-align-self-baseline {
    align-self: baseline;
}

表示結果

align-self: stretch

align-self: stretchは、要素をコンテナの高さ全体に引き伸ばして配置します。要素に明示的な高さが指定されていない場合にのみ機能します。

HTMLコード

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

CSSコード

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

表示結果

まとめ

align-selfプロパティは、個別の要素に対してフレックスボックスやグリッドレイアウトの垂直方向の配置を制御するために重要です。align-itemsが親コンテナ全体に影響を与えるのに対し、align-selfは特定の要素に対してのみ適用され、レイアウトの柔軟性を高めます。プロジェクトに応じて適切な値を選び、効率的なレイアウトを実現しましょう。