フレックスコンテナの主軸と交差軸を考えます。
出典: 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;
(交差軸は常に主軸に対して垂直です。)
Axesの働きをどのように説明するかという点での私の論点は、どちらの方向についても特別なことは何もないようだということです。主軸、交差軸、重要性の点ではどちらも同じで、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
を使用すると、ナビゲーションアイテムが右端に表示されたままロゴを左に揃え、全体をさまざまな画面サイズにスムーズに合わせることができます(「フレックス」)。
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 middle box will only be truly centered if adjacent boxes are equal width</p>
これを書いている時点では、 flexboxの仕様 にjustify-self
やjustify-items
の記述はありません。
ただし、 CSS Box Alignment Module には、すべてのボックスモデルで使用するための共通のアライメントプロパティのセットを確立するというW3Cの未完成の提案があります。
出典: W3C
justify-self
とjustify-items
が考慮されていることに気付くでしょう... しかしflexbox のためではありません。
主な質問をもう一度繰り返します。
"justify-items"と "justify-self"プロパティがないのはなぜですか?
質問で述べたように:
主軸に沿ってフレックスアイテムを配置するには、1つのプロパティがあります:
justify-content
十字軸に沿ってフレックスアイテムを配置するには、
align-content
、align-items
およびalign-self
の3つのプロパティがあります。
それから質問は尋ねます:
justify-items
プロパティとjustify-self
プロパティがないのはなぜですか?
1つの答えは:必要がないためです。
flexbox specification は、主軸に沿ってflexアイテムを整列するためのtwoメソッドを提供します。
justify-content
キーワードプロパティ、およびauto
marginsjustify-content
プロパティは、フレックスコンテナの主軸に沿ってフレックスアイテムを整列します。
フレックスコンテナに適用されますが、フレックスアイテムにのみ影響します。
5つの位置合わせオプションがあります。
flex-start
〜Flexアイテムは行の先頭に向かってパックされます。
flex-end
〜Flexアイテムは行末に向かって詰め込まれます。
center
〜Flexアイテムは行の中央に向かって詰め込まれます。
space-between
〜Flexアイテムは等間隔で配置され、最初のアイテムはコンテナの1つのエッジに、最後のアイテムは反対側のエッジに揃えられます。最初と最後のアイテムで使用されるエッジは、 flex-direction
および writing mode (ltr
またはrtl
)に依存します。
space-around
〜両端に半角スペースがあることを除き、space-between
と同じです。
auto
margins を使用すると、flexアイテムを中央に配置したり、間隔を空けたり、サブグループにパックしたりできます。
フレックスコンテナに適用されるjustify-content
とは異なり、auto
マージンはフレックスアイテムに適用されます。
指定された方向のすべての空き領域を消費することで機能します。
質問のシナリオ:
フレックスアイテムのグループを右揃え(
justify-content: flex-end
)にしますが、最初のアイテムを左揃えにします(justify-self: flex-start
)ナビゲーションアイテムのグループとロゴを含むヘッダーセクションを検討します。
justify-self
を使用すると、navアイテムが右端に留まる間、ロゴを左に揃えることができ、全体がさまざまな画面サイズにスムーズに調整されます(「フレックス」)。
その他の有用なシナリオ:
質問のシナリオ:
- フレックスアイテムをコーナーに配置する
.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;
}
この代替方法は、 container からあふれるflexアイテムを中央に配置する場合に役立ちます。
フレックスコンテナは、空き領域を分散することでフレックスアイテムを整列します。
したがって、equal balanceを作成して、中央のアイテムを単一のアイテムと一緒にコンテナの中央に配置するには、カウンターバランスを導入する必要があります。
以下の例では、目に見えない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
は、隣接するアイテムの幅が異なる場合、コンテナに対して中央のアイテムを中央に保持しないことに注意してください( demo )を参照してください。
前述のように、すべてのflexアイテムの幅または高さが等しい(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:絶対位置決め
flexbox仕様では、 絶対位置のflexアイテム が許可されています。これにより、兄弟のサイズに関係なく、中央のアイテムを完全に中央に配置できます。
すべての絶対配置要素と同様に、アイテムは ドキュメントフロー から削除されることに注意してください。これは、コンテナ内のスペースを占有せず、兄弟をオーバーラップできることを意味します。
以下の例では、真ん中のアイテムは絶対配置で中央に配置され、外側のアイテムはインフローのままです。ただし、逆の方法でも同じレイアウトを実現できます。中央のアイテムを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>
仕組みは次のとおりです。
.container
)はflexコンテナです。.box
)がフレックスアイテムになりました。.box
アイテムにはflex: 1
が与えられます。justify-content: center
を追加します。span
要素は中央に配置されたフレックスアイテムです。auto
マージンを使用して、外側のspan
sを左右にシフトします。justify-content
を無視して、auto
マージンのみを使用することもできます。
ただし、auto
マージンは常に優先されるため、justify-content
はここで機能します。仕様から:
8.1。
auto
margins との位置合わせ
justify-content
およびalign-self
を介したアライメントの前に、正の空き領域はその次元の自動マージンに分配されます。
justify-content
に戻って、もう1つのオプションのアイデアを示します。
space-same
〜space-between
とspace-around
のハイブリッド。 Flexアイテムは等間隔です(space-between
など)。ただし、両端に半角スペース(space-around
など)ではなく、両端にフルサイズのスペースがあります。このレイアウトは、Flexコンテナの ::before
および ::after
擬似要素を使用して実現できます。
(クレジット: @ oriol はコード用、 @ crl はラベル用)
UPDATE:ブラウザは、上記を実現するspace-evenly
の実装を開始しました。詳細については、この投稿を参照してください: フレックスアイテム間の等間隔
PLAYGROUND (上記のすべての例のコードを含む)
私はこれが答えではないことを知っています、しかし私はそれが価値があるもののためにこの問題に貢献したいです。彼らが本当に柔軟にするために彼らがflexboxのためのjustify-self
をリリースすることができれば素晴らしいでしょう。
軸上に複数の項目があるとき、justify-self
が振る舞うための最も論理的な方法は、以下に示すように、最も近いもの(またはEdge)に自分自身を合わせることです。
W3Cがこれに気付き、少なくともそれを考慮することを本当に願っています。 =)
これにより、左右のボックスのサイズに関係なく、真ん中に配置されたアイテムを作成できます。箱のうちの1つが中央の箱の点に達すると、分配するスペースがなくなるまでそれを単純に押します。
素晴らしいレイアウトを作ることの容易さは無限大です、この「複雑な」例を見てください。
これはwwwスタイルのリストで尋ねられ、Tab Atkins(スペックエディタ)は 理由を説明する答えを提供しました 。ここで少し詳しく説明します。
最初に、私たちのフレックスコンテナが単一行(flex-wrap: nowrap
)であると仮定しましょう。この場合、主軸と交差軸の間には明らかに配置の違いがあります。主軸には複数の項目が積み重ねられていますが、交差軸には積み重ねられた項目が1つだけです。そのため、クロス軸に項目ごとにカスタマイズ可能な「align-self」を設定するのは理にかなっていますが(主項目では意味がありません)。アイテムはまとめて整列されます。
マルチラインフレックスボックスの場合、同じロジックが各「フレックスライン」に適用されます。特定の行では、アイテムは交差軸で個別に配置されます(交差軸では、1行に1つのアイテムしかないため)、対して主軸に配置されます。
言い方を変えると、次のようになります。したがって、*-self
および*-content
プロパティのallは、周囲に余分なスペースを配置する方法についてです。しかし、主な違いは、*-self
バージョンはその軸に1つだけがある場合のものであり、*-content
バージョンはその軸に多くのものがある場合のものです。 one-one対many-thingsシナリオはさまざまな種類の問題であるため、さまざまな種類のオプションを使用できます。たとえば、space-around
/space-between
値は*-content
には意味がありますが*-self
には意味がありません。
SO:フレックスボックスの主軸では、周りにスペースを分配するための多くのことがあります。そのため、*-content
プロパティは意味がありますが、*-self
プロパティは意味がありません。
対照的に、交差軸では、*-self
と*-content
の両方のプロパティがあります。一方はmany flex行(align-content
)の周囲のスペースの配分方法を決定し、もう一方(align-self
)はクロス軸内のindividual flexアイテムの周囲のスペースの配分方法を決定します。与えられたフレックスライン。
(私はここで*-items
プロパティを無視します、なぜならそれらは単に*-self
のデフォルトを確立するからです。)
私はこれがフレックスボックスを使用しないことを知っていますが、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>