単一のフレックスボックスアイテムを正当化する方法（justify-contentをオーバーライドする）

あなたは無効にすることができalign-itemsてalign-self、フレックス項目について。justify-contentフレックスアイテムをオーバーライドする方法を探しています。

を使用したflexboxコンテナがありjustify-content:flex-end、最初のアイテムをにしたい場合justify-content: flex-start、どうすればそれができますか？

これはこの投稿で最もよく答えられました：https：//stackoverflow.com/a/33856609/269396

そこではないようです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仕様で定義されています。

申し訳ありませんが、仕様にはそのためのプロパティはありませんが、ここで私が使用してきたトリックがあります。コンテナ要素（を含むものdisplay:flex）をにjustify-content:space-around 設定し、1番目と2番目のアイテムの間に要素を追加してflex-grow:10（またはセットアップで機能する他の値）

編集：アイテムがきちんと配置されている場合はflex-shrink: 10;、追加の要素にも追加することをお勧めします。そうすることで、レイアウトが小さいデバイスで適切に反応するようになります。

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

.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コンテナと1つの子の順序を入れ替えるだけです。

justify-selfもうすぐブラウザに来るようです。MDNにはすでにその記事があります。この記事の執筆時点では、ブラウザーのサポートは不十分です。

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

あなたがしたいんアイテムの幅これらの状況についてはflex-end知られている、あなたは「0 0 ##ピクセル」に自分のフレックスを設定し、にしたい項目を設定することができますflex-startとflex:1

これにより、疑似flex-startアイテムがコンテナーを埋めるtext-align:leftようになります。それをフォーマットするか、何でもします。

内部アイテムのスタイルをに設定することで、同様のケースを解決しましたmargin: 0 auto。
状況：私のメニューには通常3つのボタンが含まれていますjustify-content: space-between。ただし、ボタンが1つしかない場合は、左ではなく中央に配置されます。