動的にサイズが設定される兄弟要素の間で中間要素を中央に配置するにはどうすればよいですか?

動的な兄弟幅を使用して中央の要素を中央に配置する

水平方向に整列した 3 つのボックスで構成され、それらの間の間隔を表すドットで構成されるレイアウトを想像してください。

[Left box]......[Center box]......[Right box]

サイドボックスのいずれかを外すと、センターボックスが

[Left box]......[Center box].................

また、反対側のボックスが削除された場合も同様です:

................[Center box].................

さらに、サイド ボックスはそのままで、中央のボックスの内容が利用可能なスペースを埋めるように拡張される必要があります。サイズが固定されています。オーバーフローは、コンテンツをクリップするために overflow: hidden および text-overflow: ellipsis で処理されます。

[Left box][Center boxxxxxxxxxxxxx][Right box]

フレックスボックス構造は要素を水平方向に整列させますが、サイド ボックスの幅が異なる場合、中央揃えは維持されません。望ましい効果を達成するために、ネストされたフレックス コンテナーと自動マージンを導入します。

.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; }

この戦略は、サイド ボックスの幅に関係なく、自動マージンを使用して中央の項目を自動的に中央に配置します。 justify-content: center;位置合わせにより、中央のボックス内のコンテンツが中央に配置されるようになります。

フレックス コンテナをネストすることで、個々のボックスの余白を制限し、他の要素のレイアウトに影響を与えないようにします。この方法では、サイド ボックスの幅が大幅に異なる場合でも、真のセンタリングが実現されます。

以上が動的にサイズが設定される兄弟要素の間で中間要素を中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。