[解決済み] CSS Flexboxで、"justify-items "と "justify-self "プロパティはなぜないのですか？

2022-03-20 08:34:42

質問

フレックスコンテナの主軸と横軸を考える。

<サブ出典 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 を主軸に1つのプロパティに統合？

なぜ主軸には justify-self プロパティを使用できますか？

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

フレックスコンテナの隅にフレックスアイテムを配置する
#box3 { align-self: flex-end; justify-self: flex-end; }
フレックスアイテムのグループを右寄せにする ( justify-content: flex-end ) が、最初の項目は左揃え ( justify-self: flex-start )

ヘッダーセクションに、ナビアイテム群とロゴがある場合を考えてみましょう。このセクションは justify-self ロゴは左寄せ、ナビは右寄せで、画面サイズに応じたスムーズな調整（"flexes"）が可能です。

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

jsFiddleバージョン

この記事を書いている時点では、以下の記載はありません。 justify-self または justify-items の中にフレックスボックス仕様 .

しかし CSSボックスアライメントモジュールこれは、すべてのボックスモデルで使用できる共通の配置プロパティを確立するための W3C の未完成の提案であり、次のようになります。

<サブ出典 W3C

お気づきのように justify-self と justify-items が検討されています... ただし、フレックスボックスは不可 .

最後に本題を再確認しておきます。

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

どのように解決するのですか？

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

質問にある通りです。

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

フレックスアイテムを横軸に沿わせるために、3つのプロパティがあります。 align-content , align-items と align-self .

続いて質問です。

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

ひとつの答えかもしれません。 必要ないからです。

はフレックスボックス仕様では 2 メソッドで、フレックスアイテムを主軸に沿って整列させることができます。

は justify-content キーワードプロパティ、および
auto 余白

内容証明

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

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

5種類のアライメントがあります。

flex-start ~ Flexの項目は、行の先頭に向かって詰まっています。
flex-end ~ Flexの項目が行末に向かって詰まっています。
center ~ Flexの項目は、行の中心に向かって詰まっています。
space-between ~ Flexのアイテムは等間隔に配置され、最初のアイテムはコンテナの一方の端に、最後のアイテムは反対側の端に配置されています。最初と最後のアイテムが使用する辺は、以下の要素に依存します。 flex-direction と書き込みモード ( ltr または rtl ).
space-around ~ と同じです。 space-between ただし、両端は半角スペース。

自動マージン

と auto 余白フレックスアイテムは、中央に配置したり、間隔をあけたり、サブグループにまとめたりすることができます。

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

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

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

質問からのシナリオ

フレックスアイテムのグループを右寄せにする ( justify-content: flex-end ) が、最初の項目は左揃え( justify-self: flex-start )

ヘッダーセクションに、ナビアイテム群とロゴがある場合を考えてみましょう。このセクションは justify-self ロゴを左寄せにし、ナビアイテムを左寄せにすることができます。そして、全体がスムーズに調整される（"flexes")のです。画面サイズが変わっても

その他の便利なシナリオ

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

質問からのシナリオ

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

フレックスアイテムを縦横にセンタリングする

margin: auto の代替となるものです。 justify-content: center と align-items: center .

フレックスコンテナでは、このコードの代わりに

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

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

.box56 {
    margin: auto;
}

この代替案は、次のような場合に便利です。 コンテナからはみ出したフレックスアイテムのセンタリング .

フレックスアイテムをセンタリングし、2つ目のフレックスアイテムを1つ目のフレックスアイテムとエッジの間にセンタリングします。

フレックスコンテナは、空きスペースを分散してフレックスアイテムを整列させます。

したがって イコールバランス そのため、カウンターバランスが必要です。

以下の例では、見えない第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 プロパティは、隣接するアイテムの幅が異なる場合、コンテナに対して中央のアイテムを維持することはできません ( デモを見る ).

前述のように、すべてのフレックスアイテムの幅または高さが同じでない限り ( 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：ネストした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 ) は、フレックスコンテナです。
それぞれの子 div ( .box ) がフレックスアイテムになりました。
各 .box の項目には flex: 1 コンテナのスペースを均等に配分するために
これで、項目は行内のすべてのスペースを消費し、幅も同じになりました。
各アイテムを（ネストされた）フレックスコンテナにし、その上に justify-content: center .
これで各 span 要素は中央揃えのフレックスアイテムです。
フレックスを使用する auto マージンを使って、外側の span

justify-content