Beim Experimentieren mit Flexbox Bei Layouts kann es zu Szenarien kommen, in denen ein 1-Pixel-Rand auf Flex-Elemente angewendet wird, die auf „flex: 0 0“ gesetzt sind „25 %“ stellt eine Herausforderung dar, da 1 % zu übermäßige Abstände erzeugt. Um dieses Problem zu beheben, ziehen Sie den folgenden Ansatz in Betracht:
Im bereitgestellten CSS-Snippet hat die Klasse „foto“ den Wert „flex: 0 0 25 %“. Um einen Rand von 1 Pixel zu erreichen, können Sie diese Einstellung auf „Flex: 1 0 22 %“ ändern. Dadurch werden 22 % für die Flex-Basis der Elemente bereitgestellt, sodass vier Elemente pro Zeile gewährleistet sind. Flex-grow ist auf 1 gesetzt, wodurch die Elemente erweitert werden und den verbleibenden Randraum verbrauchen.
Anzeige : flex;<br> flex-wrap: wrap;<br> justify-content: space-around;<br> margin: 10px;<br>}</p><p>/<em> Aktualisierte Ränder für 1px-Abstand </em>/<br>.foto {<br> flex: 1 0 22%;<br> min-height: 50px; <br>Rand: 1px;<br>Hintergrundfarbe: rot;<br>}
<div class="foto foto1">1</div><br> <div> <div class="foto foto3" >3</div><br> <div> <div class="foto foto5">5</div><br> <div> <div class="foto foto7">7</div><br> <div> <div class="foto foto9"> 9</div><br> <div> <div class="foto foto2">2</div><br> <div></div>
Mit dieser Anpassung jeweils Das Element „foto“ behält die gewünschte Breite von 22 % bei und erhält gleichzeitig einen scharfen Rand von 1 Pixel. Diese Lösung behebt die Situation effektiv und bietet eine bessere Kontrolle über Ihr Flexbox-Layout.
Das obige ist der detaillierte Inhalt vonWie erreicht man eine präzise Marge von 1 Pixel bei Flex-Artikeln mit „Flex: 0 0 25 %'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!