Wie füge ich mit „Flex: 0 0 25 %' einen 1-Pixel-Rand zu Flex-Elementen hinzu?

Hinzufügen eines 1-Pixel-Rands zu Flex-Elementen mit Flex: 0 0 25 %

Bei der Arbeit mit Flex-Layouts kann es wünschenswert sein, einen Rand hinzuzufügen einen kleinen Spielraum, z. B. 1 Pixel, für flexible Elemente. Flexbox lässt jedoch von Natur aus keine Bruchwerte als Ränder zu.

Für Flex-Elemente, die mit „flex: 0 0 25 %“ definiert wurden, ist das direkte Hinzufügen eines 1-Pixel-Rands nicht möglich. Dies liegt daran, dass die Flex-Basis auf 25 % festgelegt ist, sodass kein Platz für einen Rand übrig bleibt.

Lösung:

Um in diesem Szenario einen Rand von 1 Pixel zu erreichen, Nutzen Sie die Eigenschaft „Flex-Grow“:

flex: 1 0 22%;

• Flex: 1: Mit „Flex-Grow“ kann das Element über den angegebenen Wert hinaus expandieren Flex-Basis.
• 0: Flex-Shrink ist auf 0 gesetzt, um sicherzustellen, dass das Element nicht unter seine Flex-Basis schrumpft.
• 22 %: Flex-Basis wird auf 22 % reduziert um den gewünschten 1-Pixel-Rand auf jeder Seite zu berücksichtigen (2/11 = 0,19 % pro Seite, was zusammen 22 % ergibt). 25 %).

Durch die Reduzierung der Flex-Basis und die Erhöhung des Flex-Wachstums erhält das Element den gewünschten Spielraum und behält dennoch seine definierten Proportionen bei.

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>

Das obige ist der detaillierte Inhalt vonWie füge ich mit „Flex: 0 0 25 %' einen 1-Pixel-Rand zu Flex-Elementen hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!