Wie platziere ich Flexbox-Elemente mithilfe von CSS richtig?

So passen Sie den Abstand zwischen Flexbox-Elementen mit CSS an

Einstellen des Mindestabstands zwischen Flexbox-Elementen mithilfe von margin: 0 5px und margin: 0 - 5px scheint eine Problemumgehung zu sein. Es gibt jedoch spezielle CSS-Eigenschaften, die für diesen Zweck entwickelt wurden:

CSS-Gap-Eigenschaft:

In modernen Browsern ist die Gap-Eigenschaft für Mehrspalten, Flexbox, und Rasterlayouts. Es legt den Abstand zwischen Zeilen und Spalten fest:

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

CSS row-gap-Eigenschaft:

Für Flexbox- und Rasterlayouts definiert row-gap den Abstand dazwischen Zeilen:

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

CSS-Spaltenlücke Eigenschaft:

In Mehrspalten-, Flexbox- und Rasterlayouts gibt Column-Gap den Abstand zwischen Spalten an:

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

Beispiel:

Um die Verwendung zu veranschaulichen, betrachten Sie den folgenden Code:

#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>

Dieser Code erstellt eine Flexbox mit vier grauen Elementen, die gleichmäßig durch eine 10-Pixel-Lücke verteilt sind.

Das obige ist der detaillierte Inhalt vonWie platziere ich Flexbox-Elemente mithilfe von CSS richtig?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!