為Flex 項目添加精確的1px 邊距
嘗試使用Flexbox 時佈局中，您可能會遇到將1px 邊距套用到設定為'flex: 0 0 的 Flex 項目的情況25%' 證明具有挑戰性，因為 1% 會產生過大的間距。要解決此問題，請考慮以下方法：
在提供的 CSS 片段中，「foto」類別具有「flex: 0 0 25%」。若要實現 1px 邊距，您可以將此設定修改為「flex: 1 0 22%」。這將為專案的彈性基礎分配 22%，確保每行有四個元素。 Flex-grow 設定為 1，導致專案擴展並消耗剩餘的邊距空間。
顯示: flex;<br> flex-wrap: 換行;<br> justify-content: space-around; margin: 10px;<p>}<em></em>/<br>更新了1 像素間距的邊距<br>/<br>.foto {<br> flex: 1 0 22%;<br> 最小高度: 50px; <br> 邊距：1px；<br> 背景顏色：紅色;<br>}</p><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> <div></div> <p></p> </div> </div>透過此調整，每個“ foto”元素將保持所需的22% 寬度，同時獲得清晰的1px 邊距。該解決方案有效地解決了這種情況，並提供了對 Flexbox 佈局的更好控制。 </div> </div> </div>
以上是如何使用「flex: 0 0 25%」在 Flex 專案上實現精確的 1px 邊距？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
