☰

フレックスボックスアイテム間の距離を設定するにはどうすればいいですか? 質問する

tag-icon • tag-icon css flexbox spacing
フレックスボックスアイテム間の距離を設定するにはどうすればいいですか? 質問する

margin: 0 5px使用しているフレックスボックス項目.itemとコンテナー間の最小距離を設定しますmargin: 0 -5px。これはハックのようです。この目的を達成するための別のプロパティまたはメソッドはありますか?

#box {
  display: flex;
  width: 100px;
  margin: 0 -5px;
}

.item {
  background: gray;
  width: 50px;
  height: 50px;
  margin: 0 5px;
}
<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

ベストアンサー1

CSSgapプロパティ:

新しいgapCSSプロパティマルチカラム、フレックスボックス、グリッドレイアウト用の新しいブラウザで動作するようになりました。（リンク 1;リンク 2）。これはrow-gapおよびの省略形ですcolumn-gap。

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

CSSrow-gapプロパティ:

のrow-gapCSSプロパティフレックスボックスとグリッドレイアウトの両方で、行間にギャップを作成できます。

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

CSScolumn-gapプロパティ:

のcolumn-gapCSSプロパティ複数列、フレックスボックス、グリッドレイアウトでは、列間にギャップを作成できます。

#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 id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

おすすめ記事