項目の整列

CoddyのHTMLジャーニー「CSSによるスタイリング」セクションの一部。レッスン 47/76。

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

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

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

value: 交差軸に沿ったフレックスアイテムの望ましい配置で、次のいずれかです。

stretch: これがデフォルト値です。フレックスアイテムは、min-width/max-width および min-height/max-height を尊重しながら、交差軸に沿ってコンテナーいっぱいに伸縮します。

flex-start: Flex アイテムは交差軸の始点に配置されます。

flex-end: フレックスアイテムは交差軸の末尾に配置されます。

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

baseline: Flex アイテムは、ベースラインが揃うように配置されます。

例：

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

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

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

チャレンジ

簡単

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

次の手順に従ってください。

.seas要素にスタイルを設定する：
- クラスが.seasの<div>要素を対象とするCSSルールを記述します。
- 子要素を柔軟に配置できるように、displayをflexに設定します。
- フレックスアイテムを交差軸の中央に揃えるため、align-itemsプロパティをcenterに設定します。
.oceans要素にスタイルを設定する：
- クラスが.oceansの<div>要素を対象とするCSSルールを記述します。
- 子要素を柔軟に配置できるように、displayをflexに設定します。
- フレックスアイテムを交差軸の末尾に揃えるため、align-itemsプロパティをflex-endに設定します。

自分で試してみよう

<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>

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

CSSによるスタイリングのすべてのレッスン

自分で練習してみよう: Webプレイグラウンド