フレックスボックス項目間の間隔を簡単に制御するにはどうすればよいですか?

フレックスボックス項目の間隔の管理

質問:

フレックスボックス レイアウトで、どのように調整できますか複雑な作業を行わずにアイテム間の距離を調整するmargins?

**答え:

CSS Gap プロパティ:

高度なブラウザの場合、gap プロパティを利用して垂直方向と垂直方向の両方の間隔を確立できます。フレックスボックス、グリッド、および複数列で水平方向layouts.

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

CSS Row-Gap プロパティ:

特にフレックスボックスおよびグリッド レイアウトの垂直方向の間隔については、Row-Gap プロパティがオプションです。

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

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

複数列、フレックスボックス、およびグリッド レイアウトでは、列ギャップ プロパティによって水平方向の間隔が制御されます。

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

例:

次のスニペットは、ギャップ プロパティを使用してフレックスボックス間にスペースを作成する方法を示しています。アイテム:

<div>

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

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

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