css - flexbox と は

CSS Flexboxでは、「justify-items」および「justify-self」プロパティがないのはなぜですか? (4)

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

質問で述べたように：

主軸に沿ってフレックスアイテムを整列させるために、 justify-content プロパティが1つあります

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

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

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

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

flexbox仕様で は、主軸に沿ってflexアイテムを配置するための 2つの 方法が提供されています。

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

正当化コンテンツ

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

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

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

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

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

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

• space-between between〜Flexアイテムは等間隔に配置され、最初のアイテムはコンテナの一方の端に揃えられ、最後のアイテムは反対側の端に揃えられます。 最初と最後のアイテムで使用されるエッジは、 flex-direction と 書き込みモード （ ltr または rtl ）に依存し ます 。

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

オートマージン

auto マージンを使用すると 、フレックスアイテムを中央に配置したり、間隔を空けたり、サブグループにまとめたりできます。

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

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

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

質問のシナリオ：

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

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

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

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

質問のシナリオ：

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

この代替方法は 、コンテナからあふれるフレックスアイテムを中央 に配置するときに便利です。

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

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

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

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

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

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

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

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

質問のシナリオ：

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

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

前述のように、すべてのflexアイテムの幅または高さが同じでない場合（ flex-direction 応じて）、真ん中のアイテムを真の中央に配置することはできません。 この問題は、 justify-self プロパティ（もちろん、タスクを処理するように設計されている）を強く 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 揃えにし、外側のアイテムを 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 を左右にシフトし span 。

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

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

8.1。 auto 余白に揃える

justify-content および align-self を使用した整列の前に、正の空き領域はその次元の自動マージンに分配されます。

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

ジャスティファイ justify-content 少し戻って、もう1つのオプションのアイデアを示します。

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

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

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

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

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