wie ich den Abstand in Bilderngalerie Flex -Elementen mit Margen

in Flexbox -Layouts anpassen kann, Elemente mit Flex -Werten von '0 25%' haben eine feste Breite und schrumpfen nicht. Um Platz zwischen diesen Elementen hinzuzufügen und gleichzeitig eine gitterartige Struktur aufrechtzuerhalten, können Ränder angewendet werden. Die Anwendung einer 1% igen Marge führt jedoch zu Lücken, die möglicherweise zu groß sind.

, um eine 1px -Marge zu erreichen, verwenden Sie den Flex -Wert '1 0 22%'. Dies setzt die Flex-Base auf 22%und sorgt dafür, dass nur vier Elemente pro Reihe vorhanden sind. Der Flex-Flex-Wert wird auf 1 gesetzt, sodass die Elemente wachsen und den verbleibenden Raum füllen können, den die Ränder hinterlassen haben. Dies schafft eine subtile 1px-Lücke 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;
}