Flexbox で一貫した間隔を実現するにはどうすればよいですか?

フレックスボックスの等間隔: ギャップを埋める

フレックスボックスの共通の課題の 1 つは、最初と最後を含む項目間の等間隔を実現することです。 「justify-content: space-around」プロパティはこれに近いものですが、間隔が不均等になるため視覚的な不均衡が生じます。

間隔のジレンマを解決する

幸いなことに、これは、均等なスペース分布を確保するための 2 つの効果的な方法です。

方法 1:擬似要素

最新のブラウザでは、::before および ::after 擬似要素をフレックス項目として扱います。これらをコンテナに追加することで、「justify-content: space-between」を利用して等間隔の錯覚を作成できます。疑似要素は幅 0 を占有し、表示されるフレックス項目間に等しいスペースを残します。

HTML コード:

<flex-container>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
</flex-container>

CSS コード:

flex-container {
  display: flex;
  justify-content: space-between;
}

flex-container::before,
flex-container::after {
  content: "";
}

方法 2: オフセット間隔

もう 1 つの方法では、マージンまたはパディングを使用してオフセット間隔を作成します。このアプローチはブラウザ間でより一貫して機能しますが、追加の CSS 調整が必要になる場合があります。

HTML コード:

<flex-container>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
</flex-container>

CSS コード:

flex-container {
  display: flex;
  justify-content: space-between;
}

flex-item {
  margin-left: 10px;
  margin-right: 10px;
}

/* Remove margin from first and last items */
flex-container > :first-child {
  margin-left: 0;
}
flex-container > :last-child {
  margin-right: 0;
}

どちらの方法もフレックス項目間の間隔を効果的に均等化し、均一なビジュアルを提供します。アレンジメント。

以上がFlexbox で一貫した間隔を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。