CSS Flexboxでは、 "justify-items"および "justify-self"プロパティがないのはなぜですか？

Question

フレックスコンテナの主軸と交差軸を考えます。

^{出典： W3C}

フレックスアイテムを主軸に沿って揃えるには、1つのプロパティがあります。

• justify-content

交差軸に沿ってフレックスアイテムを整列させるには、3つのプロパティがあります。

• align-content
• align-items
• align-self

上の図では、主軸は水平方向、交差軸は垂直方向です。これらはフレックスコンテナのデフォルトの方向です。

ただし、これらの指示は flex-direction プロパティと簡単に交換できます。

/* main axis is horizontal, cross axis is vertical */
flex-direction: row;
flex-direction: row-reverse;

/* main axis is vertical, cross axis is horizontal */    
flex-direction: column;
flex-direction: column-reverse;

（交差軸は常に主軸に対して垂直です。）

Axesの働きをどのように説明するかという点での私の論点は、どちらの方向についても特別なことは何もないようだということです。主軸、交差軸、重要性の点ではどちらも同じで、flex-directionを使用すると簡単に前後に切り替えることができます。

それでは、なぜ交差軸は2つの追加のアライメントプロパティを得るのでしょうか？

align-contentとalign-itemsが主軸の1つのプロパティに統合されているのはなぜですか？

主軸がjustify-selfプロパティを取得しないのはなぜですか？

---

これらのプロパティが役立つシナリオ

• フレックスコンテナの隅にフレックスアイテムを配置する
  #box3 { align-self: flex-end; justify-self: flex-end; }

• フレックス項目のグループを右寄せ（justify-content: flex-end）にしますが、最初の項目を左寄せにします（justify-self: flex-start）

  一連のナビゲーション項目とロゴを含むヘッダーセクションを考えます。 justify-selfを使用すると、ナビゲーションアイテムが右端に表示されたままロゴを左に揃え、全体をさまざまな画面サイズにスムーズに合わせることができます（「フレックス」）。

• 3つのフレックスアイテムの行で、中央のアイテムをコンテナの中央（justify-content: center）に固定し、隣接するアイテムをコンテナの端（justify-self: flex-startとjustify-self: flex-end）に揃えます。

  space-aroundプロパティの値space-betweenとjustify-contentは、隣接する項目の幅が異なる場合、中央の項目をコンテナに対して中央に配置しません。

#container {
  display: flex;
  justify-content: space-between;
  background-color: lightyellow;
}
.box {
  height: 50px;
  width: 75px;
  background-color: springgreen;
}
.box1 {
  width: 100px;
}
.box3 {
  width: 200px;
}
#center {
  text-align: center;
  margin-bottom: 5px;
}
#center > span {
  background-color: aqua;
  padding: 2px;
}

<div id="center">
  <span>TRUE CENTER</span>
</div>

<div id="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</div>

<p>note that the middle box will only be truly centered if adjacent boxes are equal width</p>

jsFiddleバージョン

---

これを書いている時点では、 flexboxの仕様 にjustify-selfやjustify-itemsの記述はありません。

ただし、 CSS Box Alignment Module には、すべてのボックスモデルで使用するための共通のアライメントプロパティのセットを確立するというW3Cの未完成の提案があります。

^{出典： W3C}

justify-selfとjustify-itemsが考慮されていることに気付くでしょう... しかしflexbox のためではありません。

---

主な質問をもう一度繰り返します。

"justify-items"と "justify-self"プロパティがないのはなぜですか？

Answer 1

主軸に沿ってFlexアイテムを配置する方法

質問で述べたように：

主軸に沿ってフレックスアイテムを配置するには、1つのプロパティがあります： justify-content

十字軸に沿ってフレックスアイテムを配置するには、 align-content 、 align-itemsおよびalign-self の3つのプロパティがあります。

それから質問は尋ねます：

justify-itemsプロパティとjustify-selfプロパティがないのはなぜですか？

1つの答えは：必要がないためです。

flexbox specification は、主軸に沿ってflexアイテムを整列するためのtwoメソッドを提供します。

1. justify-contentキーワードプロパティ、および
2. auto margins

---

justify-content

justify-content プロパティは、フレックスコンテナの主軸に沿ってフレックスアイテムを整列します。

フレックスコンテナに適用されますが、フレックスアイテムにのみ影響します。

5つの位置合わせオプションがあります。

• flex-start〜Flexアイテムは行の先頭に向かってパックされます。

  

• flex-end〜Flexアイテムは行末に向かって詰め込まれます。

  

• center〜Flexアイテムは行の中央に向かって詰め込まれます。

  

• space-between〜Flexアイテムは等間隔で配置され、最初のアイテムはコンテナの1つのエッジに、最後のアイテムは反対側のエッジに揃えられます。最初と最後のアイテムで使用されるエッジは、 flex-direction および writing mode （ltrまたはrtl）に依存します。

  

• space-around〜両端に半角スペースがあることを除き、space-betweenと同じです。

  

---

オートマージン

auto margins を使用すると、flexアイテムを中央に配置したり、間隔を空けたり、サブグループにパックしたりできます。

フレックスコンテナに適用されるjustify-contentとは異なり、autoマージンはフレックスアイテムに適用されます。

指定された方向のすべての空き領域を消費することで機能します。

---

フレックスアイテムのグループを右に揃えますが、最初のアイテムを左に揃えます

質問のシナリオ：

• フレックスアイテムのグループを右揃え（justify-content: flex-end）にしますが、最初のアイテムを左揃えにします（justify-self: flex-start）

  ナビゲーションアイテムのグループとロゴを含むヘッダーセクションを検討します。 justify-selfを使用すると、navアイテムが右端に留まる間、ロゴを左に揃えることができ、全体がさまざまな画面サイズにスムーズに調整されます（「フレックス」）。

---

その他の有用なシナリオ：

---

角にフレックスアイテムを配置する

質問のシナリオ：

• フレックスアイテムをコーナーに配置する.box { align-self: flex-end; justify-self: flex-end; }

---

フレックスアイテムを垂直および水平に中央揃えする

margin: autoは、justify-content: centerおよびalign-items: centerの代替です。

Flexコンテナ上のこのコードの代わりに：

.container {
    justify-content: center;
    align-items: center;
}

フレックスアイテムでこれを使用できます。

.box56 {
    margin: auto;
}

この代替方法は、 container からあふれるflexアイテムを中央に配置する場合に役立ちます。

---

フレックスアイテムを中央に配置し、最初とフレックスの間に2番目のフレックスアイテムを中央に配置する

フレックスコンテナは、空き領域を分散することでフレックスアイテムを整列します。

したがって、equal balanceを作成して、中央のアイテムを単一のアイテムと一緒にコンテナの中央に配置するには、カウンターバランスを導入する必要があります。

以下の例では、目に見えない3番目のフレックスアイテム（ボックス61および68）を導入して、「実際の」アイテム（ボックス63および66）のバランスを取ります。

もちろん、この方法はセマンティクスの点では素晴らしいものではありません。

または、実際のDOM要素の代わりに擬似要素を使用できます。または、絶対配置を使用できます。ここでは、3つの方法すべてについて説明します。中央および下揃えのフレックスアイテム

注：上記の例は、最も外側のアイテムの高さ/幅が等しい場合にのみ、真のセンタリングに関して機能します。フレックスアイテムの長さが異なる場合は、次の例を参照してください。

---

隣接するアイテムのサイズが異なる場合、フレックスアイテムを中央に配置する

質問のシナリオ：

• 3つのフレックスアイテムの行で、中央のアイテムをコンテナの中央に固定し（justify-content: center）、隣接するアイテムをコンテナの端に揃えます（justify-self: flex-startおよびjustify-self: flex-end）。

  space-aroundプロパティの値space-betweenおよびjustify-contentは、隣接するアイテムの幅が異なる場合、コンテナに対して中央のアイテムを中央に保持しないことに注意してください（ demo ）を参照してください。

前述のように、すべてのflexアイテムの幅または高さが等しい（flex-directionに依存）場合を除き、真ん中のアイテムを真の中央に配置することはできません。この問題は、justify-selfプロパティ（もちろん、タスクを処理するように設計されている）を強く主張します。

#container {
  display: flex;
  justify-content: space-between;
  background-color: lightyellow;
}
.box {
  height: 50px;
  width: 75px;
  background-color: springgreen;
}
.box1 {
  width: 100px;
}
.box3 {
  width: 200px;
}
#center {
  text-align: center;
  margin-bottom: 5px;
}
#center > span {
  background-color: aqua;
  padding: 2px;
}

<div id="center">
  <span>TRUE CENTER</span>
</div>

<div id="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</div>

<p>The middle box will be truly centered only if adjacent boxes are equal width.</p>

この問題を解決するための2つの方法があります：

解決策1：絶対位置決め

flexbox仕様では、 絶対位置のflexアイテム が許可されています。これにより、兄弟のサイズに関係なく、中央のアイテムを完全に中央に配置できます。

すべての絶対配置要素と同様に、アイテムは ドキュメントフロー から削除されることに注意してください。これは、コンテナ内のスペースを占有せず、兄弟をオーバーラップできることを意味します。

以下の例では、真ん中のアイテムは絶対配置で中央に配置され、外側のアイテムはインフローのままです。ただし、逆の方法でも同じレイアウトを実現できます。中央のアイテムをjustify-content: centerで中央に配置し、外側のアイテムを絶対に配置します。

解決策2：ネストされたFlexコンテナー（絶対配置なし）

.container {
  display: flex;
}
.box {
  flex: 1;
  display: flex;
  justify-content: center;
}
.box71 > span { margin-right: auto; }
.box73 > span { margin-left: auto;  }

/* non-essential */
.box {
  align-items: center;
  border: 1px solid #ccc;
  background-color: lightgreen;
  height: 40px;
}

<div class="container">
  <div class="box box71"><span>71 short</span></div>
  <div class="box box72"><span>72 centered</span></div>
  <div class="box box73"><span>73 loooooooooooooooong</span></div>
</div>

仕組みは次のとおりです。

• トップレベルのdiv（.container）はflexコンテナです。
• 各子div（.box）がフレックスアイテムになりました。
• コンテナスペースを均等に分散するために、各.boxアイテムにはflex: 1が与えられます。
• これで、アイテムは行のすべてのスペースを消費し、同じ幅になります。
• 各アイテムを（ネストされた）フレックスコンテナにし、justify-content: centerを追加します。
• 現在、各span要素は中央に配置されたフレックスアイテムです。
• フレックスautoマージンを使用して、外側のspansを左右にシフトします。

justify-contentを無視して、autoマージンのみを使用することもできます。

ただし、autoマージンは常に優先されるため、justify-contentはここで機能します。仕様から：

8.1。 auto margins との位置合わせ

justify-contentおよびalign-selfを介したアライメントの前に、正の空き領域はその次元の自動マージンに分配されます。

---

justify-content：スペースと同じ（概念）

justify-content に戻って、もう1つのオプションのアイデアを示します。

• space-same〜space-betweenとspace-aroundのハイブリッド。 Flexアイテムは等間隔です（space-betweenなど）。ただし、両端に半角スペース（space-aroundなど）ではなく、両端にフルサイズのスペースがあります。

このレイアウトは、Flexコンテナの ::before および ::after 擬似要素を使用して実現できます。

^{（クレジット： @ oriol はコード用、 @ crl はラベル用）}

UPDATE：ブラウザは、上記を実現するspace-evenlyの実装を開始しました。詳細については、この投稿を参照してください： フレックスアイテム間の等間隔

---

PLAYGROUND （上記のすべての例のコードを含む）

Answer 2

私はこれが答えではないことを知っています、しかし私はそれが価値があるもののためにこの問題に貢献したいです。彼らが本当に柔軟にするために彼らがflexboxのためのjustify-selfをリ​​リースすることができれば素晴らしいでしょう。

軸上に複数の項目があるとき、justify-selfが振る舞うための最も論理的な方法は、以下に示すように、最も近いもの（またはEdge）に自分自身を合わせることです。

W3Cがこれに気付き、少なくともそれを考慮することを本当に願っています。 =）

これにより、左右のボックスのサイズに関係なく、真ん中に配置されたアイテムを作成できます。箱のうちの1つが中央の箱の点に達すると、分配するスペースがなくなるまでそれを単純に押します。

素晴らしいレイアウトを作ることの容易さは無限大です、この「複雑な」例を見てください。

Answer 3

これはwwwスタイルのリストで尋ねられ、Tab Atkins（スペックエディタ）は 理由を説明する答えを提供しました 。ここで少し詳しく説明します。

最初に、私たちのフレックスコンテナが単一行（flex-wrap: nowrap）であると仮定しましょう。この場合、主軸と交差軸の間には明らかに配置の違いがあります。主軸には複数の項目が積み重ねられていますが、交差軸には積み重ねられた項目が1つだけです。そのため、クロス軸に項目ごとにカスタマイズ可能な「align-self」を設定するのは理にかなっていますが（主項目では意味がありません）。アイテムはまとめて整列されます。

マルチラインフレックスボックスの場合、同じロジックが各「フレックスライン」に適用されます。特定の行では、アイテムは交差軸で個別に配置されます（交差軸では、1行に1つのアイテムしかないため）、対して主軸に配置されます。

---

言い方を変えると、次のようになります。したがって、*-selfおよび*-contentプロパティのallは、周囲に余分なスペースを配置する方法についてです。しかし、主な違いは、*-selfバージョンはその軸に1つだけがある場合のものであり、*-contentバージョンはその軸に多くのものがある場合のものです。 one-one対many-thingsシナリオはさまざまな種類の問題であるため、さまざまな種類のオプションを使用できます。たとえば、space-around/space-between値は*-contentには意味がありますが*-selfには意味がありません。

SO：フレックスボックスの主軸では、周りにスペースを分配するための多くのことがあります。そのため、*-contentプロパティは意味がありますが、*-selfプロパティは意味がありません。

対照的に、交差軸では、*-selfと*-contentの両方のプロパティがあります。一方はmany flex行（align-content）の周囲のスペースの配分方法を決定し、もう一方（align-self）はクロス軸内のindividual flexアイテムの周囲のスペースの配分方法を決定します。与えられたフレックスライン。

（私はここで*-itemsプロパティを無視します、なぜならそれらは単に*-selfのデフォルトを確立するからです。）

Answer 4

私はこれがフレックスボックスを使用しないことを知っていますが、3つのアイテム（左に1つ、中央に1つ、右に1つ）の単純なユースケースでは、これは親でdisplay: grid、子でgrid-area: 1/1/1/1;を使用して簡単に達成できますそれらの子の位置付けのためのjustify-self。

<div style="border: 1px solid red; display: grid; width: 100px; height: 25px;">
  <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: left;"></div>
  <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: center;"></div>
  <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: right;"></div>
</div>

Answer 5

justify-selfがありますが、Chrome Canaryにあり、Chrome安定版にはありません。 justify-itemsさえあります：

しかし私が言うことができる限りこれらの特性はまた働かない。そのため、将来のCSSリリースのためにGoogleが事前に保存している可能性があります。彼らはすぐにプロパティを追加することを願うことができるだけです。