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

さまざまなサイドアイテムの幅の中で中央のアイテムを中央に配置する

フレックスボックスのレイアウトでは、サイドアイテムの幅が広い場合、中央のアイテムを完全に揃えることが困難になることがあります。幅が異なります。この問題に対処するために、自動マージンを備えたネストされたフレックス コンテナを利用できます。

このアプローチの背後にある重要な概念は次のとおりです。

• ネストされたフレックス コンテナを使用すると、アイテムがコンテナ内およびコンテナ間で確実に分散されます。
• 左右のボックスの内側のコンテナに自動マージンを適用すると、中央が中央になるように位置が自動調整されます。 item.

この手法を示すコードは次のとおりです。

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

/* non-essential */
.box {
  align-items: center;
  height: 40px;
}

.inner {
  background: pink;
  border: 1px solid deeppink;
  padding: 0 5px;
}

p {
  text-align: center;
  margin: 5px 0 0 0;
}

このコードでは、コンテナーはフレックスボックスとして設定され、ボックスはフレックス率が 1 のフレックス アイテムです。 1. 各ボックスは、ネストされたフレックスボックスを使用してコンテンツを中央に配置します。

重要な手順は、内部コンテナーに自動マージンを設定することです。最初と最後のボックス。左側の場合は、margin-right: auto; margin-left: auto; は要素の右側のスペースを自動的に調整します。左側でも同じことを行います。これにより、サイド ボックスの幅に関係なく、中央のボックスが中央に配置されたままになります。

このアプローチを使用すると、サイド アイテムの幅が異なる場合でも、中央のアイテムを正確に中央に配置できます。

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