CSS3

プロパティ

justify-content

→●、mdn

flex 主軸方向の整列。

justify-content プロパティは、flex コンテナの現在の行°の主軸方向に、flex アイテムを整列する。これは、flex 可能な長さおよび auto マージンが解決された後に行われる。これは概して、行°上の flex アイテムすべてについて、それぞれが［flex 不能、または flex 可能であるが その最大サイズに到達している］ときの、残されて余った free 空間の配分を補助する。それはまた、行°を過フローするアイテムの整列について、ある程度の制御を供する。

flex-start

flex アイテムは行°の始端に寄せるように収納される： 行°上の最初の flex アイテムの主始端 マージン辺は、行°の主始端辺に接合され、後続の各 flex アイテムは、先行するアイテムに接合される。

<DIV style="display:flex;
 flex-direction:row;
 justify-content:flex-start;
 border:1px solid red;
 width:250px; height:50px;
">
 <DIV style="flex-basis:50px; border:1px solid black">１</DIV>
 <DIV style="flex-basis:60px; border:1px solid black">２</DIV>
 <DIV style="flex-basis:70px; border:1px solid black">３</DIV>
</DIV>

flex-end

flex アイテム は行°の終端に寄せるように収納される： 行°上の最後の flex アイテムの主始端 マージン辺は、行°の主終端辺に接合され、先行する各 flex アイテムは、後続のアイテムに接合される。

<DIV style="display:flex;
 flex-direction:row;
 justify-content:flex-end;
 border:1px solid red;
 width:250px; height:50px;
">
 <DIV style="flex-basis:50px; border:1px solid black">１</DIV>
 <DIV style="flex-basis:60px; border:1px solid black">２</DIV>
 <DIV style="flex-basis:70px; border:1px solid black">３</DIV>
</DIV>

center

flex アイテム は行°の中央に寄せるように収納される： 行°上の一連の flex アイテムは、互いに接合された上で、［行°の主始端 辺と行°上の最初のアイテムとの間］、および［行°の主終端 辺と行°上の最後のアイテムとの間］の空間が等量になるように、行°の中央に寄せるように整列される。（残された free 空間が負である場合、flex アイテムは両方向に等しく過フローすることになる。）

<DIV style="display:flex;
 flex-direction:row;
 justify-content:center;
 border:1px solid red;
 width:250px; height:50px;
">
 <DIV style="flex-basis:50px; border:1px solid black">１</DIV>
 <DIV style="flex-basis:60px; border:1px solid black">２</DIV>
 <DIV style="flex-basis:70px; border:1px solid black">３</DIV>
</DIV>

space-between

flex アイテム は行°内に均等に分布される： 残された free 空間が負である場合、あるいは 行°上に在る flex アイテム が 1 個だけの場合、この値の効果は flex-start と一致する。他の場合、行°上の［最初／最後］の flex アイテムの［主始端／主終端］マージン辺が、行°の［主始端／主終端］辺に接合され、行°上の残りの flex アイテムについては、隣接する 2 つのアイテムの間隔がすべて一致するように、free 空間が配分される。

<DIV style="display:flex;
 flex-direction:row;
 justify-content:space-between;
 border:1px solid red;
 width:250px; height:50px;
">
 <DIV style="flex-basis:50px; border:1px solid black">１</DIV>
 <DIV style="flex-basis:60px; border:1px solid black">２</DIV>
 <DIV style="flex-basis:70px; border:1px solid black">３</DIV>
</DIV>

space-around

一連の flex アイテム は、両端には半分サイズの空間を伴う様に、行°内に均等に分布される： 残された free 空間が負であるか、または 行°上に在る flex アイテムが 1 個だけの場合、この値の効果は center と一致する。他の場合、行°上の隣接する どの 2 つの flex アイテムの間隔も同じサイズになり、その半分サイズが［行°上の［最初／最後］の flex アイテムと［flex コンテナ 辺］との間隔］に一致するように、free 空間が配分される。

¶図省く

<DIV style="display:flex;
 flex-direction:row;
 justify-content:space-around;
 border:1px solid red;
 width:250px; height:50px;
">
 <DIV style="flex-basis:50px; border:1px solid black">１</DIV>
 <DIV style="flex-basis:60px; border:1px solid black">２</DIV>
 <DIV style="flex-basis:70px; border:1px solid black">３</DIV>
</DIV>

テスト