css - flexbox と は




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

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

質問で述べたように:

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

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

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

justify-itemsjustify-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: autojustify-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-aroundspace-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-betweenspace-around ハイブリッド。 Flexアイテムは等間隔です( space-between ように)。ただし、両端に半角スペース( space-around ような)ではなく、両端にフルサイズのスペースがあります。

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

(クレジット:コードは @crl 、ラベルは @crl )

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

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

フレックスコンテナの主軸と交差軸を検討します。

出典: 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 主軸の1つのプロパティに統合されるのはなぜですか?

主軸が justify-self プロパティを取得しないのはなぜですか?

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

  • フレックスコンテナの角にフレックスアイテムを配置する
    #box3 { align-self: flex-end; justify-self: flex-end; }

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

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

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

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

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

jsFiddleバージョン

この記事の執筆時点では、 flexbox specに justify-self または justify-items の言及はありません。

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

出典: W3C

justify-selfjustify-items が考慮されていることに気付くでしょう... しかし、flexboxについてはそうではありません

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

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


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

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

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

言い換えると、 *-content *-self および *-content プロパティは すべて 、物事の周りに余分なスペースを分散する方法に関するものです。 ただし、重要な違いは、 *-content バージョンは その軸に単一のものがある 場合に対応し、 *-content バージョンは その軸に 潜在的に 多くのもの がある場合に対応することです。 単一のものと多くのもののシナリオはさまざまなタイプの問題であるため、利用可能なさまざまなタイプのオプションがあります。たとえば、 space-around / space-between 値は *-content は意味 space-between ますが、 *-content は意味がありません。 *-self

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

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

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


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

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

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

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

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


justify-self がありますが、Chrome安定版ではなくChrome Canaryにあります。 justify-items もあり justify-items

しかし、私が知る限り、これらのプロパティも機能しません。 したがって、おそらくGoogleは将来のCSSリリースのために事前にそれを保存したでしょう。 彼らがプロパティをすぐに追加することを望むことができるだけです。





w3c