CSS3

プロパティ

align-self

→●、mdn

frex 交叉軸方向の整列。

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

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

auto

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

flex-start

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

flex-end

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

center

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

baseline

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

stretch

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

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

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

¶図省く

テスト