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

751
Michael Benjamin 2015-09-14 05:30.

フレックスコンテナの主軸と交差軸について考えてみます。

                                                                                                                                                   出典:W3C

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

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

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

ただし、これらの方向は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-contentalign-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)。

    隣接するアイテムの幅が異なる場合、valuesspace-aroundspace-betweenonjustify-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-selfjustify-itemsにおけるフレキシボックス仕様

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

                                                                                                                                                   出典:W3C

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


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

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

6 answers

1387
Michael Benjamin 2015-11-23 05:37.

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

質問で述べたように:

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

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

次に、質問は次のように尋ねます。

なぜ何も存在しないjustify-itemsjustify-selfの性質?

1つの答えは次のようになります:それらは必要ないからです。

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

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

正当化-コンテンツ

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

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

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

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

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

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

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

  • space-aroundspace-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;
}

この代替手段はコンテナがあふれているフレックスアイテムの一番上までスクロールできませんに配置するときに役立ちます。


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

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

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

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

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

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

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


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

質問からのシナリオ:

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

    隣接するアイテムの幅が異なる場合、valuesspace-aroundspace-betweenonjustify-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:ネストされたフレックスコンテナ(絶対配置なし)

.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して使用することもできautoます。

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

8.1。整列auto マージン

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


justify-content:space-same(コンセプト)

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

  • space-same〜のハイブリッドspace-betweenspace-around。フレックスアイテムは等間隔(のようにspace-between)ですが、両端にハーフサイズのスペース(のように)の代わりに、両端にspace-aroundフルサイズのスペースがあります。

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

(クレジット:@oriolコードについて、および@crlラベル用)

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


PLAYGROUND(上記のすべての例のコードを含む)

172
Mark 2015-09-16 00:18.

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

軸上に複数のアイテムがある場合justify-self、動作するための最も論理的な方法は、以下に示すように、最も近い隣接ノード(またはエッジ)に整列することであると私は信じています。

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

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

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

22
dholbert 2015-09-15 06:20.

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

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

複数行のフレックスボックスの場合、同じロジックが各「フレックスライン」に適用されます。特定のラインでは、アイテムはクロス軸で個別に配置されます(クロス軸では、ラインごとにアイテムが1つしかないため)、メイン軸では集合的に配置されます。


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

SO:フレックスボックスの主軸には、スペースを分散させるものがたくさんあります。したがって、*-contentプロパティはそこでは意味がありますが、プロパティではありません*-self

対照的に、交差軸には、a*-self*-contentプロパティの両方があります。1つは、多くのフレックスライン(align-content)の周りにスペースを分散する方法を決定し、もう1つ()は、特定のフレックスライン内で交差軸の個々のフレックスアイテムのalign-self周りにスペースを分散する方法を決定します。

*-itemsプロパティは単にデフォルトを確立するだけなので、ここでは無視しています*-self。)

1
Venryx 2019-07-21 10:45.

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

1
Leif Messinger LOAF 2020-04-17 16:18.

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

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

Related questions

MORE COOL STUFF

「水曜日」シーズン1の中心には大きなミステリーがあります

「水曜日」シーズン1の中心には大きなミステリーがあります

Netflixの「水曜日」は、典型的な10代のドラマ以上のものであり、実際、シーズン1にはその中心に大きなミステリーがあります.

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ケイト・ミドルトンは、州の夕食会と州の訪問中にカミラ・パーカー・ボウルズからスポットライトを奪いたくなかった、と専門家は言う.

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンが、オリビア・ワイルドが彼女とハリー・スタイルズとの間の「難しい」が「非常に友好的」な分割を恒久的にすることを望んでいる理由を見つけてください.

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする 

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする&nbsp;

エリザベス女王の死後、ケイト・ミドルトンが舞台裏で「非常に困難な時期」を過ごしていたと伝えられている理由を調べてください.

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セント ヘレナ島のジェイコブズ ラダーは 699 段の真っ直ぐ上る階段で、頂上に到達すると証明書が発行されるほどの難易度です。

The Secrets of Airline Travel Quiz

The Secrets of Airline Travel Quiz

Air travel is far more than getting from point A to point B safely. How much do you know about the million little details that go into flying on airplanes?

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

パンデミックは終わったかもしれないが、Covid-19 は終わっていない

パンデミックは終わったかもしれないが、Covid-19 は終わっていない

2021 年 6 月 8 日にニューヨーク市で開催された covid-19 パンデミックで亡くなった人々の命を偲び、祝うために、ネーミング ザ ロスト メモリアルズが主催するイベントと行進の最中に、グリーンウッド墓地の正門から記念碑がぶら下がっています。週末、ジョー・バイデン大統領は、covid-19 パンデミックの終息を宣言しました。これは、過去 2 年以上にわたり、公の場でそうするための長い列の中で最新のものです。

デビル・イン・オハイオの予告編は、エミリー・デシャネルもオハイオにいることを明らかにしています

デビル・イン・オハイオの予告編は、エミリー・デシャネルもオハイオにいることを明らかにしています

オハイオ州のエミリー・デシャネル みんな早く来て、ボーンズが帰ってきた!まあ、ショーボーンズではなく、彼女を演じた俳優. エミリー・デシャネルに最後に会ってからしばらく経ちました.Emily Deschanel は、長期にわたるプロシージャルな Bones の Temperance “Bones” Brennan としてよく知られています。

ドナルド・トランプはFBIのマー・ア・ラーゴ襲撃映像をリリースする予定ですか?

ドナルド・トランプはFBIのマー・ア・ラーゴ襲撃映像をリリースする予定ですか?

どうやら、ドナルド・トランプに近い人々は、今月初めにFBIによって家宅捜索された彼のMar-a-Lago財産からの映像を公開するよう彼に勧めています. 前大統領はテープを公開するかどうかを確認していませんが、息子はフォックス・ニュースにそうなるだろうと語った.

Andor は、他の Star Wars ショーから大きな距離を置きます。

Andor は、他の Star Wars ショーから大きな距離を置きます。

アンドールの一場面。数十年前、ジョージ・ルーカスがスター・ウォーズのテレビ番組を制作するのを妨げた主な理由は、お金でした。

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、子供向けのパズルの本の序文を書き、ジョージ王子、シャーロット王女、ルイ王子と一緒にテキストを読むと述べた.

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

Yak's Produce は、数十個のつぶれたメロンを野生動物のリハビリ専門家であるレスリー グリーンと彼女のルイジアナ州の救助施設で暮らす 42 匹の動物に寄付しました。

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

8 枚目のスタジオ アルバムのリリースに向けて準備を進めているデミ ロヴァートは、「スーパー グレート ガイ」と付き合っている、と情報筋は PEOPLE に確認しています。

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

イーサン プラスの誕生日のお祝いは、TLC のウェルカム トゥ プラスビルのシーズン 4 のフィナーレで、戦争中の母親のキム プラスと妻のオリビア プラスを結びつけました。

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

ホームオフィスのセットアップ術を極めよう!AppExert の開発者は、家族全員が一緒にいる場合でも、在宅勤務の技術を習得しています。祖父や曽祖父が共同家族で暮らしていた頃の記憶がよみがえりました。

2022 年、私たちのデジタル ライフはどこで終わり、「リアル ライフ」はどこから始まるのでしょうか?

20 年前のタイムトラベラーでさえ、日常生活におけるデジタルおよびインターネットベースのサービスの重要性に驚くことでしょう。MySpace、eBay、Napster などのプラットフォームは、高速化に焦点を合わせた世界がどのようなものになるかを示してくれました。

ニューロマーケティングの秘密科学

ニューロマーケティングの秘密科学

マーケティング担当者が人間の欲望を操作するために使用する、最先端の (気味が悪いと言う人もいます) メソッドを探ります。カートをいっぱいにして 3 桁の領収書を持って店を出る前に、ほんの数点の商品を買いに行ったことはありませんか? あなたは一人じゃない。

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

私たちが住んでいる世界を確実に理解するには、データが必要です。ただし、空間参照がない場合、このデータは地理的コンテキストがないと役に立たなくなる可能性があります。

Language