絶対位置を指定せずに、Flexbox を使用して要素を左と中央に同時に配置するにはどうすればよいでしょうか?

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

Web デザインの領域では、Flexbox が強力なレイアウト ツールとして登場し、要素の配置と分布を正確に制御します。ただし、ある要素を左に配置したまま別の要素を中央に配置するなど、特定の方法で要素を配置すると、特定の課題が生じる可能性があります。

従来は、左の要素に対して margin-right プロパティを auto に設定することが使用されていました。この手法は左側の要素を効果的に位置合わせしますが、隣接する要素の中心合わせも妨げます。絶対配置に頼らずにこの制限を克服するために、私たちは独創的な解決策を模索します。

空の 3 番目の要素を追加する

空の 3 番目の要素をミックスに導入することによってでは、中央の要素の中央揃えを維持しながら、左側の要素を完全に揃えるデザインを作成します。修正された HTML 構造は次のとおりです:

<code class="html"><div class="parent">
  <div class="left">Left</div>
  <div class="center">Center</div>
  <div class="right"></div>
</div></p>
<p><h3>Flexbox スタイルの適用</h3></p>
<p>適切な配置を確保するために、次の CSS スタイルを適用します:</p>
<pre class="brush:php;toolbar:false"><code class="css">.parent {
  display: flex;
}

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

これらのスタイルは、左側と右側の両方の要素を効果的に設定して、利用可能なスペースを均等に拡大および分配し、中央の要素が完全に中央に配置されるようにします。

仕組み

このソリューションの魅力は、2 つの要素だけが拡大するように設定され、両方の要素が同じ幅を受け取るという事実にあります。その結果、利用可能なスペースが左右の要素に均等に分配され、中央の要素は影響を受けません。その結果、中央の位置が簡単に維持されます。

このアプローチは、目的の配置を実現するためにコンテンツをコピーしたり非表示にしたりする必要がないため、他の方法よりも優れています。代わりに、センタリングが自然に行われ、フレックスボックス レイアウトの威力と柔軟性が示されます。

以上が絶対位置を指定せずに、Flexbox を使用して要素を左と中央に同時に配置するにはどうすればよいでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。