絶対位置決めを行わずにフレックスボックスで 1 つの要素を左に配置し、別の要素を中央に配置する方法

フレックスボックスを使用した左揃えと中央揃え: 絶対位置決めを使用しないソリューション

子要素の整列にフレックスボックスを使用する場合、整列が難しい場合があります。絶対配置を使用せずに、一方の要素を左に配置し、もう一方の要素を中央に配置します。追加の空要素を使用するソリューションは次のとおりです。

HTML:

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

CSS:

<code class="css">.parent {
  display: flex;
}

.left,
.right {
  flex: 1;
}

/* Styles for demonstration */
.parent {
  padding: 5px;
  border: 2px solid #000;
}

.left,
.right {
  padding: 3px;
  border: 2px solid red;
}

.center {
  margin: 0 3px;
  padding: 3px;
  border: 2px solid blue;
}</code>

説明:

1. 左右の要素は flex: 1 に設定されており、利用可能なスペースを均等に分配するために拡張されます。
2. 空の右側の要素左側の要素が中央の要素を中心からずらさないことが保証されます。

このアプローチでは、絶対的な配置や左側のコンテンツを右側に複製する必要がなく、一貫した中央揃えが作成されます。

以上が絶対位置決めを行わずにフレックスボックスで 1 つの要素を左に配置し、別の要素を中央に配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。