サイドボックスが不均一なフレックスボックスコンテナで中央のアイテムを中央に配置するにはどうすればよいですか?

非対称のサイド ボックスを使用して中央のアイテムを中央に配置

目的は、隣接するアイテムの幅が異なる場合に、コンテナ内の中央のアイテムを中央に配置することです。コンテンツのオーバーフローに関係なく、適切な配置を維持します。

使用Flexbox

Flexbox は、ネストされたコンテナーと自動マージンを使用したソリューションを提供します:

.container {
  display: flex;
}

.box {
  flex: 1;
  display: flex;
  justify-content: center;
}

.box:first-child > div { margin-right: auto; }
.box:last-child  > div { margin-left: auto; }

説明:

• 最も外側のコンテナー水平方向に伸びるフレックスコンテナです。
• 各「box」要素これもフレックス コンテナであり、その内容は中央に配置されます。
• "margin-right: auto;"最初のボックスの内側の要素をコンテナの端に向かって右に押し込み、効果的に左側に揃えます。
• "margin-left: auto;"最後のボックスの内側の要素を左に引っ張ってコンテナの端に合わせ、右側に揃えます。
• プレゼンテーションの目的で追加のスタイル (高さ、パディングなど) を追加できます。

例:

<div class="container">
  <div class="box"><div class="inner">short box</div></div>
  <div class="box"><div class="inner">centered box</div></div>
  <div class="box"><div class="inner">looooooooooooooooooooooong box</div></div>
</div>

<p>→ true center</p>

このアプローチでは、関係なく中央の要素が配置されます。コンテンツが溢れている場合でも、サイド ボックスの幅を制限できます。

以上がサイドボックスが不均一なフレックスボックスコンテナで中央のアイテムを中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。