【CSS】align-items - コンテナーアイテムの交差軸配置

【CSS】align-items - コンテナーアイテムの交差軸配置

CSSのalign-itemsプロパティについて解説します。

検証環境

align-items

align-itemsは“フレックスコンテナー・グリッドコンテナーのアイテム(子要素)の交差軸配置”のプロパティです。

基本構文

align-items: 値;

代表的な値は次の通りです。

意味
start 先頭側に寄せる。
end 末尾側に寄せる。
center 中央に寄せる。
stretch 行の高さと同じになるように拡張

サンプル

start

<style>
div {
    display: flex;
    background: lightgray;
    height: 300px;
    flex-wrap: wrap;
    ___ih_hl_start
    align-items: start;
    ___ih_hl_end
}
p {
    border: 1px solid black;
    text-align: center;
    width: 40%;
}
</style>

<div>
    <p>HTML</p>
    <p>CSS</p>
    <p>JavaScript</p>
    <p>WebBrowser</p>
    <p>Server</p>
</div>

end

<style>
div {
    display: flex;
    background: lightgray;
    height: 300px;
    flex-wrap: wrap;
    ___ih_hl_start
    align-items: end;
    ___ih_hl_end
}
p {
    border: 1px solid black;
    text-align: center;
    width: 40%;
}
</style>

<div>
    <p>HTML</p>
    <p>CSS</p>
    <p>JavaScript</p>
    <p>WebBrowser</p>
    <p>Server</p>
</div>

center

<style>
div {
    display: flex;
    background: lightgray;
    height: 300px;
    flex-wrap: wrap;
    ___ih_hl_start
    align-items: center;
    ___ih_hl_end
}
p {
    border: 1px solid black;
    text-align: center;
    width: 40%;
}
</style>

<div>
    <p>HTML</p>
    <p>CSS</p>
    <p>JavaScript</p>
    <p>WebBrowser</p>
    <p>Server</p>
</div>

stretch

<style>
div {
    display: flex;
    background: lightgray;
    height: 300px;
    flex-wrap: wrap;
    ___ih_hl_start
    align-items: stretch;
    ___ih_hl_end
}
p {
    border: 1px solid black;
    text-align: center;
    width: 40%;
}
</style>

<div>
    <p>HTML</p>
    <p>CSS</p>
    <p>JavaScript</p>
    <p>WebBrowser</p>
    <p>Server</p>
</div>