web-dev-qa-db-ja.com

単一のフレックスボックスアイテムを正当化する方法（justify-contentを上書き）

フレックスアイテムの場合は、align-itemsをalign-selfでオーバーライドできます。私はフレックスアイテムのjustify-contentをオーバーライドする方法を探しています。

もしあなたがjustify-content:flex-endを持つflexboxコンテナを持っていたけれども、あなたが最初のアイテムをjustify-content: flex-startにしたいのなら、どうすればそれができますか？

これはこの記事によって最もよく答えられた： https://stackoverflow.com/a/33856609/269396

cssflexbox
205
Mahks

justify-selfはないようですが、適切なmarginをauto¹に設定しても同様の結果が得られます。 Ｅ． flex-direction: row（デフォルト）の場合、子を左に揃えるためにmargin-right: autoを設定する必要があります。

.container {
  height: 100px;
  border: solid 10px skyblue;
  
  display: flex;
  justify-content: flex-end;
}
.block {
  width: 50px;
  background: tomato;
}
.justify-start {
  margin-right: auto;
}
<div class="container">
  <div class="block justify-start"></div>
  <div class="block"></div>
</div>

¹この動作は Flexboxの仕様で定義されています 。

414
Pavlo

スペックにはそのためのプロパティはありませんが、ここで私が使用していたトリックです：コンテナ要素（display:flexを持つもの）をjustify-content:space-aroundに設定し、それから最初と2番目の項目の間に追加要素を追加してflex-grow:10 （またはあなたの設定で動作する他の値）

編集：アイテムがぴったりと揃っている場合は、余分な要素にもflex-shrink: 10;を追加することをお勧めします。そのため、レイアウトは小型デバイスでも適切に反応します。

17
eeglbalazs

これらの要素すべてを兄弟ノードとして保持することに実際に制限されていない場合は、一緒になっているものを別のデフォルトフレックスボックスにラップし、両方のコンテナにスペースを使用させることができます。

.space-between {
  border: 1px solid red;
  display: flex;
  justify-content: space-between;
}
.default-flex {
  border: 1px solid blue;
  display: flex;
}
.child {
  width: 100px;
  height: 100px;
  border: 1px solid;
}
<div class="space-between">
  <div class="child">1</div>
  <div class="default-flex">
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
  </div>
</div>

あるいは、flex-startとflex-endを逆にして同じことをしているのなら、default-flexコンテナと単独の子の順番を入れ替えるだけです。

10
borkxs

justify-selfがまもなくブラウザにやってくるようです。 MDN に関する記事がすでにあります。これを書いている時点では、ブラウザのサポートは貧弱です。

マージンソリューションについて：私はギャップのあるFlexboxグリッドを持っています。 Flexboxにはflex-gapプロパティはありません（まだ？）。それで、溝のために、私はパディングとマージンを使っているので、margin: autoは他のマージンを上書きする必要があります...

2
Frank Lämmer

あなたがflex-endしたいアイテムの幅がわかっているような状況では、それらのflexを "0 0 ## px"に設定し、flex-startであなたがflex:1したいアイテムを設定することができます。

これは疑似flex-start項目がコンテナを埋めるようにします。それをtext-align:leftまたはそれ以外のものにフォーマットするだけです。

1
Mahks

私は内側の項目のスタイルをmargin: 0 autoに設定することによって同様のケースを解決しました。
状況：私のメニューには通常3つのボタンがあります。その場合、それらはjustify-content: space-betweenである必要があります。しかし、ボタンが1つしかない場合は、左ではなく中央揃えになります。

0
Micros