align-items

アラインアイテム（フレックスボックス）

意味要素の上下方向の配置

align-itemsとは？

align-itemsプロパティは、フレックスコンテナ内のアイテムを上下に沿ってどのように配置するかを指定するプロパティです。これにより、アイテムを上端、下端、中央などの位置に揃えることができます。

align-itemsの具体的な使い方

フレックスアイテムを上下中央に配置する例

<style>
    .container {
        display: flex;
        align-items: center;
        background-color: yellow;
        height: 150px;
    }
</style>

<div class='container'>
    上下中央
</div>

クラス名'container'が指定されたフレックスコンテナ内の全てのフレックスアイテムを上下方向に中央揃えにします。

align-itemsに関するよくある質問

Q. align-itemsの初期値は？

A. align-itemsの初期値は「stretch」です。これにより、フレックスアイテムはコンテナの高さいっぱいに引き伸ばされます。

Q. 水平方向の配置はできる？

A. align-itemsは上下（クロス軸）方向の配置を制御します。水平（主軸）方向の配置にはjustify-contentを使用します。

Q. 個別のアイテムに適用できる？

A. 個別のフレックスアイテムに適用するにはalign-selfプロパティを使用します。align-itemsはコンテナ全体に適用されます。

align-itemsが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSのalign-itemsやflex、align-self、order、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。