CSS3

プロパティ

align-items

→●、mdn

frex アイテムの交叉軸方向の整列。

flex コンテナの行°の中の一連の flex アイテムは、方向が垂直にされることを除いて justify-content と同様に、行°の交叉軸方向に整列させることができる。align-items は、匿名 flex アイテムも含め、flex コンテナのすべての flex アイテム用の既定の整列を設定する。align-self は、この既定の整列を、個々の flex アイテムについて上書きできるようにする。（匿名 flex アイテムに対しては、align-self は、それに結び付けられている flex コンテナ上の align-items の値に常に合致する。）

flex アイテムの交叉軸マージンが両側とも auto である場合、align-self の効果はない。

flex レイアウト･モデル：

auto

交叉軸の整列制御を、親ボックス上の align-items の値に委ねる。（これが align-self の初期値。）

<DIV style="width:200px; height:120px; border:1px solid red;
 display:flex;
 align-items:auto;
">
  <DIV style="flex-basis:50px; border:1px solid black">1</DIV>
  <DIV style="flex-basis:50px; border:1px solid black">2a<BR>あいう</DIV>
  <DIV style="flex-basis:50px; border:1px solid black">3</DIV>
</DIV>

flex-start

flex アイテムの交叉始端 マージン辺は、行°の交叉始端辺に接合される。

<DIV style="width:200px; height:120px; border:1px solid red;
 display:flex;
 align-items:flex-start;
">
  <DIV style="flex-basis:50px; border:1px solid black">1</DIV>
  <DIV style="flex-basis:50px; border:1px solid black">2a<BR>あいう</DIV>
  <DIV style="flex-basis:50px; border:1px solid black">3</DIV>
</DIV>

flex-end

flex アイテムの交叉終端 マージン辺は，行°の交叉終端辺に接合される。

<DIV style="width:200px; height:120px; border:1px solid red;
 display:flex;
 align-items:flex-end;
">
  <DIV style="flex-basis:50px; border:1px solid black">1</DIV>
  <DIV style="flex-basis:50px; border:1px solid black">2a<BR>あいう</DIV>
  <DIV style="flex-basis:50px; border:1px solid black">3</DIV>
</DIV>

center

flex アイテムのマージンボックスは、行°内の交叉軸の中で中央寄せにされる。（flex 行の交叉サイズが flex アイテムのそれより小さい場合、それは両方向に等しく過フローすることになる。）

<DIV style="width:200px; height:120px; border:1px solid red;
 display:flex;
 align-items:center;
">
  <DIV style="flex-basis:50px; border:1px solid black">1</DIV>
  <DIV style="flex-basis:50px; border:1px solid black">2a<BR>あいう</DIV>
  <DIV style="flex-basis:50px; border:1px solid black">3</DIV>
</DIV>

baseline

flex アイテムは基底線整列に関与する ─ すなわち、行°上の、関与しているすべての flex アイテムは、それらの基底線が互いに整列するように、かつ それらのうち［［［自身の［基底線と［交叉始端マージン辺］］の間の距離］が最大になるアイテム］が、行°の交叉始端 辺に接合される］ように、整列される。整列する軸に基底線を持たない flex アイテムの基底線は、そのボーダーボックスから合成されるとする。

<DIV style="width:200px; height:120px; border:1px solid red;
 display:flex;
 align-items:baseline;
">
  <DIV style="flex-basis:50px; font-size:40px; border:1px solid black">1</DIV>
  <DIV style="flex-basis:50px; border:1px solid black">2a<BR>あいう</DIV>
  <DIV style="flex-basis:50px; border:1px solid black">3</DIV>
</DIV>

stretch

交叉サイズ･プロパティが auto に算出され、かつ 交叉軸マージンの両側とも非 auto の場合、flex アイテムは伸張される。その場合の使用値は、［min-height／min-width／max-height／max-width］により課される拘束の下で、［そのアイテムのマージンボックスの交叉サイズが、その行°と同じサイズに可能な限り近くされる］ような長さになる。

注記： flex コンテナの縦幅が拘束されている場合、この値により、flex アイテムの内容がアイテムを過フローさせ得る。

flex アイテムの交叉始端マージン辺は、その行°の交叉始端辺に接合される。

<DIV style="width:200px; height:120px; border:1px solid red;
 display:flex;
 align-items:stretch;
">
  <DIV style="flex-basis:50px; font-size:40px; border:1px solid black">1</DIV>
  <DIV style="flex-basis:50px; border:1px solid black">2a<BR>あいう</DIV>
  <DIV style="flex-basis:50px; border:1px solid black">3</DIV>
</DIV>

テスト