Flexbox を使用して要素を左と中央に揃える

Question

Flexbox を使用して子要素を配置しています。私がやりたいのは、1 つの要素を中央に配置し、もう 1 つの要素を左に揃えることです。通常は、margin-right: auto を使用して左側の要素を設定します。問題は、中心要素を中心から遠ざけることです。絶対位置決めを使用せずにこれは可能ですか?

HTML と CSS

#parent {
  整列項目: 中央;
  境界線: 1 ピクセルの黒一色。
  ディスプレイ: フレックス;
  コンテンツの位置揃え: 中央;
  マージン: 0 自動;
  幅: 500ピクセル;
}
＃左 {
  マージン右: 自動;
}
＃中心 {
  マージン: 自動;
}

<div id="parent">
  <span id="left">左</span>
  <span id="center">中心</span>
</div>

Answer 1

3 番目の空の要素を追加します:

リーリー

および次のスタイル:

リーリー

左と右だけが成長します、そしてそのため...

• 成長要素は2つだけ(空でも構いません)と
• どちらも同じ幅です (利用可能なスペースが均等に分配されます)

#....

中心要素は常に完全に中央に配置されます。

私の意見では、これは受け入れられた回答よりもはるかに優れています。なぜなら、左側のコンテンツを右側にコピーして非表示にして、両側で同じ幅にする必要がないからです。

それは魔法のように起こるだけです (フレックスボックスは素晴らしいです)。

---

実際の動作:

リーリー リーリー

Answer 2

編集: 以下の Solo の回答 を参照してください。これはより良い解決策です。

---

フレックスボックスの背後にある考え方は、コンテナ内の可変寸法の要素を簡単に位置合わせするためのフレームワークを提供することです。したがって、要素の幅を完全に無視したレイアウトを提供することは意味がありません。基本的に、要素を通常のフローから外すため、これが絶対配置の目的です。

私の知る限り、position:absolute; を使用せずにこれを行う良い方法はありません。そのため、これを使用することをお勧めします...ただし、これを実行したくない、または実行されたくない場合は、絶対位置を使用できない場合は、次のいずれかの回避策を使用できると思います。

---

「左」div の正確な幅 がわかっている場合は、justify-content を flex-start(left) に変更します。 like 次のように「中央揃え」の div を配置します:

リーリー

---

幅がわからない場合は、 右側の「Left」をコピーし、justify-content: space- Between; を使用して、新しい幅を非表示にします。右の要素: はっきり言っておきますが、これは本当に非常に醜いものです...コンテンツをコピーするよりも絶対配置を使用する方が良いでしょう。 :-)

リーリー リーリー