絶対的な配置を使用せずにフレックスボックスで要素を左と中央に揃えるにはどうすればよいですか?

フレックスボックスを使用して要素を左と中央に配置する

問題:

子要素を配置するフレックスボックス コンテナ内で、一方の要素が中央に配置され、もう一方の要素が左に配置されます。

コード:

#parent {
  align-items: center;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  width: 500px;
}
#left {
  margin-right: auto;
}
#center {
  margin: auto;
}

問題:

margin-right を使用すると、中央に配置された要素が自動的に中心からずらされます。

絶対配置を使用しない解決策:

3 番目の空の要素を追加します:

<div class="parent">
  <div class="left">Left</div>
  <div class="center">Center</div>
  <div class="right"></div>
</div>

次のスタイルを適用します:

.parent {
  display: flex;
}
.left, .right {
  flex: 1;
}

説明:

左右の両方が均等に分散されるように設定されています (フレックス: 1)。利用可能なスペース。空の右側の要素は左側と同じ幅であるため、中央の要素は完全に中央に保たれます。

このソリューションの利点:

• コンテンツをコピーする必要はありません要素間。
• コンテンツの幅に関係なく、要素が完全に中央に配置されます。

以上が絶対的な配置を使用せずにフレックスボックスで要素を左と中央に揃えるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。