CSS3

：

プロパティ

：

align-self

　編集：2022.07.14 by T.A.

フレックス／格子アイテムのブロック軸／交叉軸方向の整列。

名前	`align-self`
値	auto \| normal \| stretch \| <baseline-position> \| <overflow-position>? <self-position>
初期値	auto
適用対象	flex アイテム、格子アイテム、絶対的に位置されたボックス
継承	されない
百分率	受容しない
算出値	指定されたキーワード（たち）
正準的順序	文法に従う
アニメーション型	離散的

ボックス（整列対象）をその包含ブロック（整列コンテナ）の中で整列コンテナの［ブロック軸／column 軸／交叉軸］方向に整列する： § 整列キーワードに述べたように、ボックスの外縁辺が、その整列コンテナの中で整列される。

auto

次に該当するときは、normal と同じにふるまう：

ボックスには親がない／
絶対的に位置されたボックスの実際の位置を決定するとき

他の場合（絶対的に位置されたボックスの静的位置を決定するときも含む）、親ボックスの align-items の算出値（から legacy キーワードを（もし在れば）除いたもの）と同じにふるまう。

<DIV style="width:150px; height:130px; border:1px solid black;
 display:flex; flex-wrap:wrap;
 align-items:center;
">
 <DIV style="align-self:auto; flex-basis:50px; border:1px solid red">1</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">2</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">3<BR>あ</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">4</DIV>
</DIV>

<DIV style="border:1px solid black;
 display:grid;
 grid-template:50px 70px/50px 70px;
 align-items:center;
">
 <DIV style="align-self:auto; border:1px solid red">1</DIV>
 <DIV style="border:1px solid black">2</DIV>
 <DIV style="border:1px solid black">3<BR>あ</DIV>
 <DIV style="border:1px solid black">4</DIV>
</DIV>

normal

当のレイアウトモード用の“既定の”整列を表現する ─ そのふるまいは、以下の各節に定義される。

<DIV style="border:1px solid black;
 display:grid;
 grid-template:50px 70px/50px 70px;
 align-items:center;
">
 <DIV style="align-self:normal; border:1px solid red">1</DIV>
 <DIV style="border:1px solid black">2</DIV>
 <DIV style="border:1px solid black">3<BR>あ</DIV>
 <DIV style="border:1px solid black">4</DIV>
</DIV>

stretch

justify-self（§ 行内軸／主軸方向の整列）に対するときと同じに定義される。

<DIV style="border:1px solid black;
 display:grid;
 grid-template:50px 70px/50px 70px;
 align-items:center;
">
 <DIV style="align-self:stretch; border:1px solid red">1</DIV>
 <DIV style="border:1px solid black">2</DIV>
 <DIV style="border:1px solid black">3<BR>あ</DIV>
 <DIV style="border:1px solid black">4</DIV>
</DIV>

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

<baseline-position> ●

＝[first | last]? && baseline

値［first／last］は、【当のプロパティが対象にする軸における】ボックスの基底線整列選好を与え、省略時の既定は first になる。

各種値の意味は、当のプロパティが対象にする軸において：

baseline

first baseline に算出される。

first baseline

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

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

<DIV style="border:1px solid black;
 display:grid;
 grid-template:50px 70px/50px 70px;
 align-items:center;
">
 <DIV style="align-self:first baseline; border:1px solid red">1</DIV>
 <DIV style="border:1px solid black">2</DIV>
 <DIV style="border:1px solid black">3</DIV>
 <DIV style="border:1px solid black">4</DIV>
</DIV>

last baseline

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

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

<DIV style="border:1px solid black;
 display:grid;
 grid-template:50px 70px/50px 70px;
 align-items:center;
">
 <DIV style="align-self:last baseline; border:1px solid red">1</DIV>
 <DIV style="border:1px solid black">2</DIV>
 <DIV style="border:1px solid black">3</DIV>
 <DIV style="border:1px solid black">4</DIV>
</DIV>

¶省く

<overflow-position>? <self-position>

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

align-self:self end;¶

<overflow-position> ●

＝unsafe | safe

safe

整列対象のサイズが整列コンテナを過フローする場合、整列対象は、整列モードが start であったかのように整列される。

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

unsafe

整列対象の［整列コンテナに対する相対的なサイズ］に関わらず、所与の整列値は尊守される。

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

¶省く

<self-position> ●

center

整列対象を、その整列コンテナの中で中央寄せにする。

<DIV style="width:150px; height:150px; border:1px solid black;
 display:flex; flex-wrap:wrap;
 align-items:start;
">
 <DIV style="flex-basis:50px; border:1px solid black">1</DIV>
 <DIV style="align-self:center; flex-basis:50px; border:1px solid red">2<BR>あ</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">3</DIV>
</DIV>

flex： align-self:center;

<DIV style="width:150px; height:150px; border:1px solid black;
 display:grid;
 grid-template:50px 70px/50px 70px;
 align-items:start;
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="align-self:center; border:1px solid red">2<BR>あ</DIV>
 <DIV style="border:1px solid black">3</DIV>
</DIV>

grid： align-self:center;

<DIV style="width:100px; height:100px; border:1px solid black;
 position:relative;
">
 <DIV style="position:absolute; align-self:center; border:1px solid red">1</DIV>
</DIV>

<DIV style="width:100px; height:100px; border:1px solid black;
 position:relative;
 align-self:center;
">
 <DIV style="position:absolute; border:1px solid red">1</DIV>
</DIV>

start

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

<DIV style="width:150px; height:150px; border:1px solid black;
 display:flex; flex-wrap:wrap;
 align-items:center;
">
 <DIV style="flex-basis:50px; border:1px solid black">1</DIV>
 <DIV style="align-self:start; flex-basis:50px; border:1px solid red">2<BR>あ</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">3</DIV>
</DIV>

end

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

<DIV style="width:150px; height:150px; border:1px solid black;
 display:flex; flex-wrap:wrap;
 align-items:center;
">
 <DIV style="flex-basis:50px; border:1px solid black">1</DIV>
 <DIV style="align-self:end; flex-basis:50px; border:1px solid red">2<BR>あ</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">3</DIV>
</DIV>

self-start

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

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

<DIV style="width:150px; height:150px; border:1px solid black;
 display:flex; flex-wrap:wrap;
 align-items:center;
">
 <DIV style="flex-basis:50px; border:1px solid black">1</DIV>
 <DIV style="align-self:self-start; flex-basis:50px; border:1px solid red">2<BR>あ</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">3</DIV>
</DIV>

self-end

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

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

<DIV style="width:150px; height:150px; border:1px solid black;
 display:flex; flex-wrap:wrap;
 align-items:center;
">
 <DIV style="flex-basis:50px; border:1px solid black">1</DIV>
 <DIV style="align-self:self-end; flex-basis:50px; border:1px solid red">2<BR>あ</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">3</DIV>
</DIV>

flex-start、 flex-end

これらの値が利用されるのは、flex レイアウトに限られる。[CSS-FLEXBOX-1]

整列コンテナ ─ すなわち flex コンテナ ─ の各辺のうち［次に与える側にあって、プロパティが対象にする軸方向にある方］に、整列対象が接合されるように整列する：

flex-start に対しては、主始端、または交叉始端
flex-end に対しては、主終端、または交叉終端

［flex-start／flex-end］値が flex 整形文脈の外側で利用されたとき ─ すなわち、次に該当するとき ─ のふるまいは［start／end］と同じになる：

flex アイテムでないボックス（または、flex コンテナの子であって絶対的に位置されたボックスの静的位置を決定するときなど、flex アイテムを装うボックス）上で、自己整列プロパティに利用されたとき
flex コンテナでないボックス上で、内容分布プロパティに利用されたとき

<DIV style="width:150px; height:150px; border:1px solid black;
 display:flex; flex-wrap:wrap;
 align-items:center;
">
 <DIV style="flex-basis:50px; border:1px solid black">1</DIV>
 <DIV style="align-self:flex-start; flex-basis:50px; border:1px solid red">2<BR>あ</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">3</DIV>
</DIV>

<DIV style="width:150px; height:150px; border:1px solid black;
 display:flex; flex-wrap:wrap;
 align-items:center;
">
 <DIV style="flex-basis:50px; border:1px solid black">1</DIV>
 <DIV style="align-self:flex-end; flex-basis:50px; border:1px solid red">2<BR>あ</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">3</DIV>
</DIV>

テスト

ここに表示

スクリプト：

スクリプト：

表示内容：

CSS3

プロパティ

align-self

関連

テスト