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

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

                                                                                                                                                   _出典：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;

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

軸の働きを説明する上での私のポイントは、どちらの方向にも特別なものは何もないように見えることです。主軸、交差軸、重要度の点で同じであり、flex-direction簡単に前後に切り替えることができます。

では、なぜ交差軸は2つの追加の配置プロパティを取得するのですか？

なぜされているalign-contentとalign-items主軸のために一つの特性に統合？

主軸が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-betweenon 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 middlebox will only be truly centered if adjacent boxes are equal width</p>

jsFiddleバージョン

この記事の執筆時点で、の言及はありませんjustify-selfかjustify-itemsにおけるフレキシボックス仕様。

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

                                                                                                                                                   _出典：W3C

あなたはそれに気づくでしょう、justify-selfそしてjustify-items考慮されています... しかしflexboxのためではありません。

最後に、主な質問を繰り返します。

「justify-items」および「justify-self」プロパティがないのはなぜですか？

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

質問で述べたように：

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

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

質問はそれを尋ねます：

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

1つの答えは次のとおりです。それらは必要ないためです。

フレキシボックス仕様は提供2つの主軸に沿ってフレックスアイテムを整列させるための方法を。

1. justify-contentキーワード財産、および
2. auto マージン

正当化するコンテンツ

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

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

5つの配置オプションがあります。

• flex-start 〜フレックスアイテムはラインの初めに向かって詰められます。

  

• flex-end 〜フレックスアイテムはラインの終わりに向かってパックされます。

  

• center 〜フレックスアイテムはラインの中心に向かって詰め込まれています。

  

• space-between〜Flexアイテムは等間隔で配置され、最初のアイテムはコンテナーの1つの端に揃えられ、最後のアイテムは反対側の端に揃えられます。最初と最後の項目で使用されるエッジはflex-direction、書き込みモード（ltrまたはrtl）によって異なります。

  

• space-around〜space-between両端に半角スペースがある以外は同じです。

  

自動マージン

autoマージン、フレックス項目は、中心離間又はサブグループにパックすることができます。

justify-contentflexコンテナに適用されるとは異なり、autoマージンはflexアイテムに適用されます。

それらは、指定された方向にすべての空きスペースを消費することによって機能します。

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

質問のシナリオ：

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

  ナビゲーションアイテムのグループとロゴを含むヘッダーセクションを考えます。 justify-selfロゴのナビゲーションアイテムが右端に滞在し、全部が異なる画面サイズにスムーズに（「撓む」）を調整しながら、左整列させることができました。

その他の便利なシナリオ：

コーナーにフレックスアイテムを配置する

質問のシナリオ：

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

フレックスアイテムを垂直方向と水平方向の中央に配置する

margin: autojustify-content: centerおよびの代替align-items: centerです。

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

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

これはflexアイテムで使用できます。

.box56 {
    margin: auto;
}

この方法は、コンテナーからオーバーフローするフレックスアイテムを中央に配置する場合に役立ちます。

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

フレックスコンテナーは、フリースペースを配布することでフレックスアイテムを整列させます。

したがって、均等なバランスを作成し、中央のアイテムを1つのアイテムと並べてコンテナの中央に配置できるようにするには、カウンターバランスを導入する必要があります。

以下の例では、「実際の」アイテム（ボックス63および66）のバランスをとるために、非表示の3番目のフレックスアイテム（ボックス61および68）が導入されています。

もちろん、この方法はセマンティクスの点で優れたものではありません。

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

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

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

質問のシナリオ：

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

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

前述のように、すべての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：絶対配置

フレックスボックス仕様では、フレックスアイテムの絶対配置が可能です。これにより、兄弟のサイズに関係なく、中央のアイテムを完全に中央に配置できます。

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

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

ソリューション＃2：ネストされたフレックスコンテナー（絶対配置なし）

.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）はflexアイテムになりました。
• 各.boxアイテムはflex: 1、コンテナスペースを均等に配分するために与えられます。
• これで、アイテムは行内のすべてのスペースを消費し、幅は同じになります。
• 各アイテムを（ネストされた）フレックスコンテナーにして、を追加しjustify-content: centerます。
• これで、各span要素は中央揃えのフレックスアイテムになります。
• フレックスautoマージンを使用して、外側spanのsを左右にシフトします。

マージンを忘れて排他的にjustify-content使用することもできautoます。

ただしjustify-content、autoマージンが常に優先されるため、ここで機能します。スペックから：

8.1。整列auto マージン

justify-contentおよびによる位置合わせの前にalign-self、正の空きスペースはその次元の自動マージンに分配されます。

justify-content：space-same（概念）

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

• space-same〜のハイブリッドspace-betweenとspace-around。フレックスアイテムはspace-between、（のように）両端にハーフサイズのスペースではなく、両端にspace-aroundフルサイズのスペースがあることを除いて、（のように）等間隔に配置されます。

このレイアウトで実現することができる::beforeと::afterフレックス容器上の擬似要素。

^{（クレジット：@oriolコードについて、および@crlラベル用）}

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

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

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

軸上に複数のアイテムがある場合justify-self、動作する最も論理的な方法は、以下に示すように、最も近いもの（またはエッジ）に整列することです。

W3Cがこれに気づき、少なくとも検討することを心から願っています。=）

このようにして、左右のボックスのサイズに関係なく、真に中央に配置されたアイテムを持つことができます。ボックスの1つが中央のボックスのポイントに到達すると、分配するスペースがなくなるまでボックスを押します。

素晴らしいレイアウトを簡単に作成する方法は無限です。この「複雑な」例をご覧ください。

これはwwwスタイルのリストで尋ねられ、Tab Atkins（仕様編集者）がその理由を説明する回答を提供しました。ここで少し詳しく説明します。

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

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

これは別の言い回しの方法です。つまり、およびプロパティはすべて、周囲に余分なスペースを配置する方法に関するものです。ただし、主な違いは、バージョンはその軸に1つしか存在しない場合のものであり、バージョンはその軸に潜在的に多くのものがある場合のものであることです。1対多のシナリオはさまざまなタイプの問題であるため、使用できるオプションのタイプはさまざまです。たとえば、/ 値はには意味がありますが、には意味がありません。*-self*-content*-self*-contentspace-aroundspace-between*-content*-self

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

対照的に、交差軸では、a *-selfと*-contentプロパティの両方があります。1つは多くのフレックスラインの周りにスペースをどのように配置するかを決定します（align-content）、もう1つは、指定されたフレックスライン内の交差軸の個々のフレックスアイテムのalign-self周りにスペースをどのように配置するかを決定します。

（*-itemsここでは、単にのデフォルトを設定するため、ここではプロパティを無視しています*-self。）

これはフレックスボックスを使用しないことを知っていますが、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>

私はこの問題、または少なくとも私の問題に対する自分の解決策を見つけました。
のjustify-content: space-around代わりに使用していましたjustify-content: space-between;。

このようにして、端の要素は上部と下部に固定され、必要に応じてカスタムマージンを設定できます。