CSS3

プロパティ

align-content

→● mdn

コンテナの内容のブロック軸内容の配置分布。

ボックスの、ブロック／column／交叉、軸方向に配置させる。

normal

<baseline-position>

＝[first | last]? && baseline

基底線の整列：●

baseline

first baseline に算出される。

first baseline

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

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

<DIV style="width:250px; height:50px; border:1px solid red;
 display:flex;
 align-content:first baseline; flex-wrap:wrap;
">
 <DIV style="flex-basis:100px; border:1px solid black">１</DIV>
 <DIV style="flex-basis:100px; border:1px solid black">２</DIV>
</DIV>

last baseline

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

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

<DIV style="width:250px; height:50px; border:1px solid red;
 display:flex;
 align-content:last baseline; flex-wrap:wrap;
">
 <DIV style="flex-basis:100px; border:1px solid black">１</DIV>
 <DIV style="flex-basis:100px; border:1px solid black">２</DIV>
</DIV>

これらの値が align-content に指定された場合、基底線による内容整列を誘発する ― すなわち、内容ボックスの中でボックスの内容をずらすことに加え、ボックス自身のサイズ法にも影響し得る。§ 基底線による内容整列 を見よ。

分布型の整列：●

<content-distribution>

＝space-between
| space-around
| space-evenly
| stretch

分布型の整列

space-between

整列対象たちは、整列コンテナ内で均等に分布される。［最初／最後］の整列対象は、整列コンテナの同じ側の辺に接合されるように置かれ、残りの整列対象たちは、隣接する、どの 2 つの整列対象の合間も同じアキになるように分布される。

<DIV style="width:150px; height:100px; border:1px solid red;
 display:flex; flex-wrap:wrap;
 align-content:space-between;
">
 <DIV style="flex-basis:50px; border:1px solid black">１</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">２</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">３</DIV>
</DIV>

<DIV style="width:150px; height:150px; border:1px solid red;
 display:grid;
 grid-template:50px 50px/50px 50px;
 align-content:space-between;
">
 <DIV style="border:1px solid black">１</DIV>
 <DIV style="border:1px solid black">２</DIV>
 <DIV style="border:1px solid black">３</DIV>
</DIV>

<DIV style="width:150px; height:100px; border:1px solid red;
 display:grid;
 grid-template:'a b'
	'c d';
 align-content:space-between;
">
 <DIV style="border:1px solid black">１</DIV>
 <DIV style="border:1px solid black">２</DIV>
 <DIV style="border:1px solid black">３</DIV>
</DIV>

<DIV style="width:150px; height:100px; border:1px solid red;
 column-count:2;
 align-content:space-between;
">
 <DIV style="border:1px solid black">１</DIV>
 <DIV style="border:1px solid black">２</DIV>
 <DIV style="border:1px solid black">３</DIV>
</DIV>

¶

space-around

整列対象たちを、［最初／最後］の整列対象の［前／後］に，他の整列対象の合間の半分の空間を与えることを除いて、space-between のときと同様に分布させる。

この値用の既定のフォールバック整列は safe center とする。

<DIV style="width:150px; height:100px; border:1px solid red;
 display:flex; flex-wrap:wrap;
 align-content:space-around;
">
 <DIV style="flex-basis:50px; border:1px solid black">１</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">２</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">３</DIV>
</DIV>

space-evenly

整列対象たちを、［最初／最後］の整列対象の［前／後］に、他の整列対象の合間と同じ空間を与えることを除いて、space-between のときと同様に分布させる。

この値用の既定のフォールバック整列は safe center とする。

<DIV style="width:150px; height:100px; border:1px solid red;
 display:flex; flex-wrap:wrap;
 align-content:space-evenly;
">
 <DIV style="flex-basis:50px; border:1px solid black">１</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">２</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">３</DIV>
</DIV>

stretch

整列対象たちの合計サイズが整列コンテナのサイズより小さい場合に、合計サイズが整列コンテナを正確に埋めるように、［整列対象たちのうち、サイズが auto にされているもの］のサイズを、その［ max-height ／ max-width ］（あるいは等価な機能性）により課される拘束は守りつつ、等しく増やす（比例的にではなく）。

この値用の既定のフォールバック整列は flex-start とする。（flex レイアウト以外のレイアウトモードの下では flex-start は start と一致する。）

<DIV style="width:150px; height:100px; border:1px solid red;
 display:flex; flex-wrap:wrap;
 align-content:stretch;
">
 <DIV style="flex-basis:50px; border:1px solid black">１</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">２</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">３</DIV>
</DIV>

<overflow-position>

＝unsafe
| safe

過フロー時の整列：●

unsafe

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

<DIV style="width:200px; height:50px; border:1px solid red;
 display:flex; flex-wrap:wrap;
 align-content:unsafe;
">
 <DIV style="align-self:center; border:1px solid black">１</DIV>
 <DIV style="align-self:center; border:1px solid black">２<BR>あ<BR>い</DIV>
 <DIV style="align-self:center; border:1px solid black">３</DIV>
</DIV>

<DIV style="width:50px; height:150px; border:1px solid red;
 display:flex; flex-direction:column;
 align-content:unsafe;
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="border:1px solid black">222222</DIV>
 <DIV style="border:1px solid black">3</DIV>
</DIV>

safe

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

<DIV style="width:200px; height:50px; border:1px solid red;
 display:flex; flex-wrap:wrap;
 align-content:safe;
">
 <DIV style="align-self:center; border:1px solid black">１</DIV>
 <DIV style="align-self:center; border:1px solid black">２<BR>あ<BR>い</DIV>
 <DIV style="align-self:center; border:1px solid black">３</DIV>
</DIV>

¶

<DIV style="width:50px; height:150px; border:1px solid red;
 display:flex; flex-direction:column;
 align-content:safe;
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="border:1px solid black">222222</DIV>
 <DIV style="border:1px solid black">3</DIV>
</DIV>

¶

<content-position>

＝center
| start
| end
| flex-start
| flex-end

位置的整列：●

center

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

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

start

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

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

end

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

<DIV style="width:150px; height:100px; border:1px solid red;
 display:flex; flex-wrap:wrap;
 align-content:end;
">
 <DIV style="flex-basis:50px; border:1px solid black">1</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">2</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:100px; border:1px solid red;
 display:flex; flex-wrap:wrap;
 align-content:flex-start;
">
 <DIV style="flex-basis:50px; border:1px solid black">1</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">2</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">3</DIV>
</DIV>

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

関連

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

テスト