絶対位置決めをせずにフレックスボックスで要素を左と中央に揃えるにはどうすればよいですか?

Flexbox を使用して要素を左と中央に配置する

Flexbox は、コンテナ内で要素を配置する強力な方法を提供します。ただし、絶対配置に頼らずに 1 つの要素を左に配置し、別の要素を中央に配置しようとすると、共通の課題が発生します。

問題

マージンを使用する場合- right: 左の要素を自動で整列させると、誤って中央の要素が右に押し出されます。これは、auto 値により、それが適用された要素間で残りのスペースが均等に分配されるためです。

絶対配置を使用しない解決策

絶対配置を使用せずにこの問題を回避するには、次のようにします。 3 番目の空の要素をコンテナに追加します:

<code class="html"><div class="parent">
  <div class="left">Left</div>
  <div class="center">Center</div>
  <div class="right"></div>
</div></code>

次に、次の CSS を適用します:

<code class="css">.parent {
  display: flex;
}

.left, .right {
  flex: 1;
}</code>

仕組み

flex プロパティは、増加する要素間で利用可能なスペースをどのように分配するかを決定します。この場合、左右の両方が拡大するように設定されており、それらの間のスペースが均等に分配されます。成長要素は 2 つだけであるため、中心要素は常に完全に中央に配置されます。

このアプローチの利点

このアプローチは、いくつかの点で受け入れられている答えよりも優れています。 :

• 両側の幅を等しくするために、左側のコンテンツを右側にコピーして非表示にする必要はありません。
• 希望の内容を実現するには、フレックスボックスの固有のプロパティに依存します。位置合わせを行うことで、よりエレガントなソリューションになります。

以上が絶対位置決めをせずにフレックスボックスで要素を左と中央に揃えるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。