Wie kann ich Flexbox-Elementen mit „flex: 0 0 25 %' einen Rand von 1 Pixel hinzufügen?

Gibt es eine Möglichkeit, 1 Pixel Rand zu Flexbox-Elementen hinzuzufügen. Bestimmter Flex: 0 0 25 %?

Um einen 1 Pixel Rand zu Flexbox hinzuzufügen Elemente, die auf „Flex: 0 0 25 %“ eingestellt sind, passen Sie die Flex-Eigenschaft auf „Flex: 1 0 22 %“ an. Dadurch wird die Flex-Basis des Elements auf 22 % gesetzt (was vier Elemente pro Zeile ermöglicht), während sie gleichzeitig wachsen und den verbleibenden Raum über den 1-Pixel-Rand füllen können (Flex-Grow auf 1 eingestellt).

Hier ist ein Beispiel:

#foto-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 10px;
}

.foto {
  flex: 1 0 22%;
  min-height: 50px;
  margin: 1px;
  background-color: red;
}

<div>

Diese Änderung ermöglicht einen Abstand von 1 Pixel zwischen den Flex-Elementen, während das gewünschte Layout erhalten bleibt.

Das obige ist der detaillierte Inhalt vonWie kann ich Flexbox-Elementen mit „flex: 0 0 25 %' einen Rand von 1 Pixel hinzufügen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!