CSS を使用してフレックスボックス項目を適切に配置するにはどうすればよいですか?

CSS でフレックスボックス項目間の距離を調整する方法

margin: 0 5px と margin: 0 - を使用してフレックスボックス項目間の最小距離を設定する5px が回避策のように思えるかもしれません。ただし、この目的のために設計された専用の CSS プロパティがあります:

CSS ギャップ プロパティ:

最新のブラウザでは、ギャップ プロパティは複数列、フレックスボックス、そしてグリッドレイアウト。行と列の両方の間隔を設定します:

#box {
  display: flex;
  gap: 10px;
}

CSS row-gap プロパティ:

フレックスボックスおよびグリッド レイアウトの場合、行ギャップは行と列の間のスペースを定義します。行:

#box {
   display: flex;
   row-gap: 10px;
}

CSS 列ギャッププロパティ:

複数列、フレックスボックス、およびグリッド レイアウトでは、列ギャップは列間のスペースを指定します:

#box {
  display: flex;
  column-gap: 10px;
}

例:

使用法を説明するには、次のことを考慮してください。コード:

#box {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  background-color: red;
  gap: 10px;
}

.item {
  background: gray;
  width: 50px;
  height: 50px;
  border: 1px black solid;
}

<div>

このコードは、10 ピクセルのギャップで等間隔に配置された 4 つの灰色のアイテムを含むフレックスボックスを作成します。

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