CSS3

：

プロパティ

：

align-items

　 編集：2022.07.14 by T.A.

→● mdn

コンテナ内の整列法。

名前 align-items
値 normal |
stretch |
<baseline-position> |
[<overflow-position>? <self-position>]
初期値 normal
適用対象 すべての要素
継承 されない
百分率 受容しない
算出値 指定されたキーワード（たち）
正準的順序 文法に従う
アニメーション型 離散的

このプロパティは、このボックスの整形文脈に関与している、すべての子ボックス（匿名ボックスも含む）用の、既定の align-self を指定する。

このプロパティの値は、特別に取り扱われることなく、そのまま align-self から参照される。

normal
［stretch（概して、置換されない要素の場合）／start（概して，置換される要素の場合）］いずれかとしてサイズする。[CSS-GRID-1] § 格子アイテムのサイズ法を見よ。結果のボックスは、それから始端に整列される。 
<DIV style="border:1px solid red;
 display:grid;
 grid:50px 70px/50px 70px 100px;
 align-items:normal;
">
 <SPAN style="border:1px solid black">1</SPAN>
 <SPAN style="border:1px solid black">2</SPAN>
 <SPAN style="border:1px solid black">3</SPAN>
 <SPAN style="border:1px solid black">4</SPAN>
</DIV>


<DIV style="border:1px solid red; width:200px; height:100px;
 display:flex; flex-wrap:wrap;
 align-items:normal;
">
 <SPAN style="flex-basis:50px; border:1px solid black">1</SPAN>
 <SPAN style="flex-basis:50px; border:1px solid black">2</SPAN>
 <SPAN style="flex-basis:50px; border:1px solid black">3</SPAN>
 <SPAN style="flex-basis:50px; border:1px solid black">4</SPAN>
</DIV>

stretch
対象の軸に応じて：
→横方向の場合
［ボックスの width の算出値は auto ］かつ［ボックスの margin-left、margin-right とも非 auto ］ならば、ボックスの使用サイズを，次のように設定する：
min-width、max-width により課される拘束は守りつつ、ボックスの外縁サイズ（横幅）が、整列コンテナを埋めるのに必要とされる長さに可能な限り近くなるようにする
→縦方向の場合
［height、margin-top、margin-bottom、min-height、max-height、縦幅］に関して、横方向の場合と同様とする。

この値用の既定のフォールバック整列は、一般には flex-start とするが、基底線整列選好として［最初の基底線集合／最後の基底線集合］もボックスに指定されている場合は［self-start／self-end］とする。

注記： stretch キーワードは、要素を そのコンテナに収まるように縮短させる。 

<DIV style="border:1px solid red; width:170px; height:100px;
 display:flex; flex-wrap:wrap;
 align-items:stretch;
">
 <SPAN style="flex-basis:auto; border:1px solid black">1</SPAN>
 <SPAN style="flex-basis:50px; border:1px solid black">2</SPAN>
 <SPAN style="flex-basis:50px; border:1px solid black">3</SPAN>
 <SPAN style="flex-basis:50px; border:1px solid black">4</SPAN>
</DIV>

<baseline-position>
＝[first | last]? && baseline
baseline
first baseline に算出される。
first baseline
ボックスは 最初の基底線による整列 に関与するものと指定する： ［ボックスの最初の基底線集合に属する整列基底線］と［ボックスが属する基底線共有グループの対応する基底線］とが整列されることになる。詳細は、§ 基底線によるボックスたちの整列法を見よ。

この値用のフォールバック整列は、［自己整列用には safe self-start ／内容分布用には safe start ］とする。 

<DIV style="border:1px solid red;
 display:grid;
 grid:50px 70px/50px 70px 100px;
 align-items:first baseline;
">
 <SPAN style="border:1px solid black;">1</SPAN>
 <SPAN style="font-size:40px; border:1px solid black;">2</SPAN>
 <SPAN style="border:1px solid black;">3</SPAN>
</DIV>

last baseline
ボックスは 最後の基底線による整列 に関与するものと指定する： ［ボックスの最後の基底線集合の整列基底線］と［ボックスが属する基底線共有グループの対応する基底線］とが整列されることになる。詳細は、§ 基底線によるボックスたちの整列法を見よ。

この値用のフォールバック整列は、［自己整列用には safe self-end ／内容分布用には safe end ］とする。 

<DIV style="border:1px solid red;
 display:grid;
 grid:50px 70px/50px 70px 100px;
 align-items:last baseline;
">
 <SPAN style="border:1px solid black;">1</SPAN>
 <SPAN style="font-size:40px; border:1px solid black;">2</SPAN>
 <SPAN style="border:1px solid black;">3</SPAN>
</DIV>

<overflow-position>? <self-position>
<overflow-position>
＝unsafe | safe
unsafe
整列対象の［整列コンテナに対する相対的なサイズ］に関わらず、所与の整列値は尊守される。 
<DIV style="border:1px solid red;
 display:grid;
 grid:50px/50px 70px 100px;
 align-items:unsafe;
">
 <SPAN style="border:1px solid black;">1</SPAN>
 <SPAN style="border:1px solid black;">2<BR>2<BR>2</SPAN>
 <SPAN style="border:1px solid black;">3</SPAN>
</DIV>

safe
整列対象のサイズが整列コンテナを過フローする場合、整列対象は，整列モードが start であったかのように整列される。
<DIV style="border:1px solid red;
 display:grid;
 grid:50px/50px 70px 100px;
 align-items:safe;
">
 <SPAN style="border:1px solid black;">1</SPAN>
 <SPAN style="border:1px solid black;">2<BR>2<BR>2</SPAN>
 <SPAN style="border:1px solid black;">3</SPAN>
</DIV>


<DIV style="border:1px solid red;
 display:grid;
 grid:50px 50px 50px/50px;
 align-items:safe;
">
 <SPAN style="border:1px solid black;">1</SPAN>
 <SPAN style="border:1px solid black;">222222</SPAN>
 <SPAN style="border:1px solid black;">3</SPAN>
</DIV>

<self-position>
＝center
| start
| end
| self-start
| self-end
| flex-start
| flex-end
center
整列対象を、その整列コンテナの中で中央寄せにする。
<DIV style="border:1px solid red;
 display:grid;
 grid:50px 70px/50px 70px 100px;
 align-items:center;
">
 <SPAN style="border:1px solid black;">1</SPAN>
 <SPAN style="border:1px solid black;">2<BR>2<BR>2</SPAN>
 <SPAN style="border:1px solid black;">3</SPAN>
 <SPAN style="border:1px solid black;">4</SPAN>
</DIV>

start
整列対象が 整列コンテナの始端辺に接合されるように整列する。
<DIV style="border:1px solid red;
 display:grid;
 grid:50px 70px/50px 70px 100px;
 align-items:start;
">
 <SPAN style="border:1px solid black;">1</SPAN>
 <SPAN style="border:1px solid black;">2<BR>2<BR>2</SPAN>
 <SPAN style="border:1px solid black;">3</SPAN>
 <SPAN style="border:1px solid black;">4</SPAN>
 <SPAN style="border:1px solid black;">5</SPAN>
</DIV>

end
整列対象が 整列コンテナの終端辺に接合されるように整列する。
<DIV style="border:1px solid red;
 display:grid;
 grid:50px 70px/50px 70px 100px;
 align-items:end;
">
 <SPAN style="border:1px solid black;">1</SPAN>
 <SPAN style="border:1px solid black;">2<BR>2<BR>2</SPAN>
 <SPAN style="border:1px solid black;">3</SPAN>
 <SPAN style="border:1px solid black;">4</SPAN>
 <SPAN style="border:1px solid black;">5</SPAN>
</DIV>

self-start
＊-content プロパティには利用できない。

整列対象の始端辺が整列コンテナの同じ側の辺に接合されるように整列する。

<DIV style="border:1px solid red;
 display:grid;
 grid:50px 70px/50px 70px 100px;
 align-items:self-start;
">
 <SPAN style="border:1px solid black;">1</SPAN>
 <SPAN style="border:1px solid black;">2<BR>2<BR>2</SPAN>
 <SPAN style="border:1px solid black;">3</SPAN>
 <SPAN style="border:1px solid black;">4</SPAN>
 <SPAN style="border:1px solid black;">5</SPAN>
</DIV>

self-end
＊-content プロパティには利用できない。

整列対象の終端辺が整列コンテナの同じ側の辺に接合されるように整列する。

<DIV style="border:1px solid red;
 display:grid;
 grid:50px 70px/50px 70px 100px;
 align-items:self-end;
">
 <SPAN style="border:1px solid black;">1</SPAN>
 <SPAN style="border:1px solid black;">2<BR>2<BR>2</SPAN>
 <SPAN style="border:1px solid black;">3</SPAN>
 <SPAN style="border:1px solid black;">4</SPAN>
 <SPAN style="border:1px solid black;">5</SPAN>
</DIV>

flex-start
flex-end
これらの値が利用されるのは、flex レイアウトに限られる。[CSS-FLEXBOX-1]
<DIV style="border:1px solid red; width:200px; height:100px;
 display:flex; flex-wrap:wrap;
 align-items:flex-start;
">
 <SPAN style="flex-basis:50px; border:1px solid black;">1</SPAN>
 <SPAN style="flex-basis:50px; border:1px solid black;">2<BR>2<BR>2</SPAN>
 <SPAN style="flex-basis:50px; border:1px solid black;">3</SPAN>
 <SPAN style="flex-basis:50px; border:1px solid black;">4</SPAN>
 <SPAN style="flex-basis:50px; border:1px solid black;">5</SPAN>
</DIV>


<DIV style="border:1px solid red; width:200px; height:100px;
 display:flex; flex-wrap:wrap;
 align-items:flex-end;
">
 <SPAN style="flex-basis:50px; border:1px solid black;">1</SPAN>
 <SPAN style="flex-basis:50px; border:1px solid black;">2<BR>2<BR>2</SPAN>
 <SPAN style="flex-basis:50px; border:1px solid black;">3</SPAN>
 <SPAN style="flex-basis:50px; border:1px solid black;">4</SPAN>
 <SPAN style="flex-basis:50px; border:1px solid black;">5</SPAN>
</DIV>

stretch 以外の値は、width／height に対する値 auto が fit-content として扱われるようにする。

注記： マージンに対する auto は、実質的にマージン区画のサイズを調整するので、justify-self より優先される。

関連

justify-items。align-content。align-self。

テスト
HTML：

ここに表示
¶[Edge]✖？
HTML：

ここに表示
スクリプト：


スクリプト：



表示内容：
表示内容：