Wie erreicht man einen Abstand von 1 Pixel zwischen Flex-Elementen in einer Bildergalerie?

So passen Sie den Abstand in Flex-Elementen in der Bildergalerie mit Rändern an

In Flexbox-Layouts werden Elemente mit Flex-Werten von „0 0 25 %“ angezeigt. haben eine feste Breite und schrumpfen oder wachsen nicht. Um zwischen diesen Elementen Platz zu schaffen und gleichzeitig eine gitterartige Struktur beizubehalten, können Ränder angewendet werden. Die Anwendung eines Randes von 1 % führt jedoch zu möglicherweise zu großen Lücken.

Um einen Rand von 1 Pixel zu erreichen, verwenden Sie den Flex-Wert „1 0 22 %“. Dadurch wird die Flex-Basis auf 22 % festgelegt, wodurch sichergestellt wird, dass nur vier Elemente pro Zeile vorhanden sind. Der Flex-Grow-Wert ist auf 1 gesetzt, sodass die Elemente wachsen und den verbleibenden Platz ausfüllen können, der von den Rändern übrig bleibt. Dadurch entsteht eine subtile Lücke von 1 Pixel zwischen den Elementen.

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

Das obige ist der detaillierte Inhalt vonWie erreicht man einen Abstand von 1 Pixel zwischen Flex-Elementen in einer Bildergalerie?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!