CSS Flexbox には、なぜ「justify-items」と「justify-self」プロパティがないのでしょうか? 質問する

フレックスアイテムを主軸に沿って整列させる方法

質問にあるように:

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

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

すると、次のような質問が出てきます。

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

一つの答えは、「それらは必要ではないから」かもしれません。

のフレックスボックス仕様フレックス アイテムを主軸に沿って配置するための2 つの方法を提供します。

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

コンテンツの正当化

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

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

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

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

  

• flex-end~ フレックスアイテムはラインの最後尾に詰められます。

  

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

  

• space-between~ フレックスアイテムは均等に配置され、最初のアイテムはコンテナの一方の端に揃えられ、最後のアイテムは反対側の端に揃えられます。最初のアイテムと最後のアイテムが使用する端は、flex-directionそして書き込みモード（ltrまたはrtl）。

  

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

  

自動マージン

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

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

指定された方向のすべての空き領域を消費することによって動作します。

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

質問からのシナリオ:

• フレックスアイテムのグループを右揃えにする（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。

フレックス コンテナー上の次のコードの代わりに:

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

.box56 {
    margin: auto;
}

#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>

.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>