CSSのみを使用して、サイズが異なるサイドボックス間の中央ボックスを中央に配置するにはどうすればよいですか?

不均等なサイドアイテムの中で中央のアイテムを中央に配置する

はじめに

幅の異なるボックスを並べて配置するレイアウトをデザインする場合、一般的な課題は、中央のボックスのセンタリングを維持することです。この記事では、この効果を実現する CSS ソリューションについて説明します。

フレックスボックスを使用した CSS ソリューション

サイド ボックスの幅に関係なく中央のボックスを中央に配置するには、フレックスボックスと自動マージンを活用できます。

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

主な特徴

• 純粋CSS: 追加のライブラリや JavaScript は必要ありません。
• 絶対配置なし: 要素はフレックスボックスを使用して配置されるため、絶対配置の必要がなくなります。
• 動的配置: 側面の幅に関係なく、中央のボックスは中央に配置されたままになります。

実装の詳細

• .container は、3 つの .box 要素すべてをラップするフレックスボックスです。
• 各 .box もフレックスボックスです。 justify-content: center を使用して、その内部コンテンツを水平に配置します。
• flex: 1 を指定すると、各 .box が利用可能なスペースを均等に埋めるように拡張されます。
• 内部要素のマージンにより、サイド ボックスの端が常にコンテナの端に接触するようになります。
• 自動マージン中央のボックスの中央揃えを維持するために、必要に応じて拡大または縮小します。

以上がCSSのみを使用して、サイズが異なるサイドボックス間の中央ボックスを中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。