Align Items

CoddyのHTMLジャーニー「Styling with CSS」セクションの一部 — レッスン 47/76。

CSSにおいて、align-itemsプロパティは、フレックスアイテムが交差軸（主軸の反対方向の軸）に沿ってどのように整列されるかを制御します。これは、行内でのアイテムの垂直方向の配置や、列内での水平方向の配置に役立ちます。このプロパティは、レイアウトをより柔軟でレスポンシブにするために有用です。

align-items プロパティを使用するための基本的な構文は次のとおりです：

.container {
    display: flex;
    align-items: value;
}

value: 交差軸（cross axis）に沿ったフレックスアイテムの配置を指定します。以下のいずれかの値を指定できます。

stretch: これはデフォルト値です。フレックスアイテムは、min-width/max-width および min-height/max-height を尊重しつつ、交差軸に沿ってコンテナを埋めるように引き伸ばされます。

flex-start: フレックスアイテムは、交差軸の開始位置に配置されます。

flex-end: Flexアイテムは交差軸の終端に配置されます。

center: Flexアイテムは交差軸に沿って中央に配置されます。

baseline: フレックスアイテムは、それぞれのベースラインが揃うように配置されます。

例えば：

.container-start {
    display: flex;
    align-items: flex-start;
}

.container-center {
    display: flex;
    align-items: center;
}

この例では、.container-start 要素はそのフレックスアイテムを交差軸の開始位置に配置し、.container-center 要素はそのフレックスアイテムを交差軸に沿って中央に配置します。

チャレンジ

簡単

2つのディビジョン（<div>）があり、それぞれに3つの子ディビジョンが含まれているHTMLドキュメントが与えられています。

以下の手順に従ってください：

.seas要素のスタイルを設定する：
- クラス.seasを持つ<div>要素をターゲットにするCSSルールを記述します。
- 子要素の柔軟な配置を可能にするために、displayをflexに設定します。
- 交差軸の中央にフレックスアイテムを整列させるために、align-itemsプロパティをcenterに設定します。
.oceans要素のスタイルを設定する：
- クラス.oceansを持つ<div>要素をターゲットにするCSSルールを記述します。
- 子要素の柔軟な配置を可能にするために、displayをflexに設定します。
- 交差軸の終端にフレックスアイテムを整列させるために、align-itemsプロパティをflex-endに設定します。

チートシート

align-items プロパティは、交差軸（主軸の反対）に沿ってフレックスアイテムをどのように配置するかを制御します。

.container {
    display: flex;
    align-items: value;
}

利用可能な値：

stretch: デフォルト。アイテムはコンテナを埋めるように引き伸ばされます
flex-start: アイテムは交差軸の開始位置に配置されます
flex-end: アイテムは交差軸の終端位置に配置されます
center: アイテムは交差軸に沿って中央に配置されます
baseline: アイテムはベースラインに沿って整列されます

.container-start {
    display: flex;
    align-items: flex-start;
}

.container-center {
    display: flex;
    align-items: center;
}

自分で試してみよう

<html>
<head>
    <title>Align Items</title>
    <style>
        .container {
            display: flex;
            height: 200px; /* Added for visualization */
            border: 2px solid darkblue; /* Added for visualization */
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="seas">
            <div>Black Sea</div>
            <div>Caribbean Sea</div>
            <div>Dead Sea</div>
        </div>
        <div class="oceans">
            <div>Atlantic Ocean</div>
            <div>Pacific Ocean</div>
            <div>Indian Ocean</div>
        </div>
    </div>
</body>
</html>