Wie kann ich den Abstand zwischen Flexbox-Elementen einfach steuern?

Flexbox-Elementabstände verwalten

Frage:

Wie kann ich Flexbox-Layouts anpassen? den Abstand zwischen Elementen, ohne auf komplizierte Verfahren zurückgreifen zu müssen Ränder?

**Antwort:

CSS-Lückeneigenschaft:

Für fortgeschrittene Browser kann die Lückeneigenschaft verwendet werden, um Abstände sowohl vertikal als auch festzulegen horizontal in Flexbox-, Raster- und mehrspaltigen Layouts.

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

CSS Row-Gap Eigenschaft:

Für vertikale Abstände speziell in Flexbox- und Rasterlayouts ist die Eigenschaft „row-gap“ eine Option.

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

CSS Column-Gap Property:

In Mehrspalten-, Flexbox- und Rasterlayouts steuert die Eigenschaft „Spaltenabstand“ die Horizontale Abstand.

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

Beispiel:

Das folgende Snippet zeigt die Verwendung der Gap-Eigenschaft, um Abstände zwischen Flexbox-Elementen zu erstellen:

<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;
}

Das obige ist der detaillierte Inhalt vonWie kann ich den Abstand zwischen Flexbox-Elementen einfach steuern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!