CSSのalign-selfでフレックスボックスやグリッド内の配置を個別に調整する方法をわかりやすく解説

2024.09.13
スポンサーリンク

CSSのalign-itemsプロパティは、フレックスボックスやグリッドレイアウトにおける要素の垂直方向の配置を制御します。このプロパティは、各アイテムの配置を設定し、align-contentのように行全体には影響しません。アイテムが単一行に並ぶ場合に使用されるプロパティです。

スポンサーリンク

align-itemsの値とその効果

  • flex-start: アイテムをコンテナの上端に揃えます。
  • flex-end: アイテムをコンテナの下端に揃えます。
  • center: アイテムをコンテナの中央に揃えます。
  • baseline: アイテムを基準線に沿って揃えます。
  • stretch: アイテムをコンテナの高さに引き伸ばして配置します（アイテムに明示的な高さが設定されていない場合）。

注意点と関連情報

align-itemsプロパティは、アイテムが単一行に並ぶ場合に効果を発揮します。align-contentが行全体に適用されるのに対して、align-itemsは各アイテムに直接影響を与えます。stretch値は、アイテムに高さが指定されていない場合にのみ機能しますので、注意が必要です。

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

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

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

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

align-itemsは、子要素がコンテナ内での垂直方向の配置を制御しますが、子要素の高さがコンテナの高さと一致している場合、効果が見えにくくなります。
対策：子要素やコンテナの高さを調整し、垂直方向に余裕ができるようにします。

子要素にmarginやpaddingが設定されている

子要素にmarginやpaddingが過剰に設定されていると、align-itemsの効果が正しく発揮されないことがあります。
対策：子要素のmarginやpaddingの設定を確認し、align-itemsの動作に影響を与えていないかチェックします。

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

子要素にposition: absolute;が設定されている場合、フレックスコンテナ内での自動配置が無効化され、align-itemsが機能しなくなります。
対策：position: absolute;を使用せずに、フレックスボックスのレイアウト機能を活用するようにします。

共通するCSSコード

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

align-items: flex-start

align-items: flex-startは、アイテムをコンテナの上端に揃えます。すべてのアイテムが上部に集まります。

HTMLコード

<div class="css-sample-container css-sample-align-items-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>

CSSコード

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

表示結果

Item 1
Item 2
Item 3

align-items: flex-end

align-items: flex-endは、アイテムをコンテナの下端に揃えます。すべてのアイテムが下部に配置されます。

HTMLコード

<div class="css-sample-container css-sample-align-items-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>

CSSコード

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

表示結果

Item 1
Item 2
Item 3

align-items: center

align-items: centerは、アイテムをコンテナの中央に揃えます。上下に均等なスペースが残り、アイテムが真ん中に配置されます。

HTMLコード

<div class="css-sample-container css-sample-align-items-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>

CSSコード

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

表示結果

Item 1
Item 2
Item 3

align-items: baseline

align-items: baselineは、アイテムを基準線に沿って揃えます。異なる高さのアイテムでも、テキストの基準線を揃えることができます。

HTMLコード

<div class="css-sample-container css-sample-align-items-baseline">
    <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>

CSSコード

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

表示結果

Item 1
Item 2
Item 3

align-items: stretch

align-items: stretchは、アイテムをコンテナの高さに引き伸ばして配置します。ただし、アイテムに明示的な高さが設定されていない場合にのみ適用されます。

HTMLコード

<div class="css-sample-container css-sample-align-items-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>

CSSコード

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

表示結果

Item 1
Item 2
Item 3

まとめ

align-itemsプロパティは、フレックスボックスやグリッドレイアウトにおける各アイテムの垂直方向の配置を制御します。align-contentが行全体に適用されるのに対し、align-itemsは各アイテムに対してのみ適用されるため、特定の要素の配置を細かく調整することが可能です。プロジェクトに応じて適切な値を選択し、レイアウトを整えるために活用しましょう。

スポンサーリンク