Bagaimana untuk Mencapai Margin 1px yang Tepat pada Item Flex dengan `flex: 0 0 25%`?

Flexbox Margin teka-teki: Menambah jidar 1px yang tepat kepada Item Flex dengan flex: 0 0 25%

Apabila bereksperimen dengan flexbox susun atur, anda mungkin menghadapi senario di mana menggunakan margin 1px untuk melentur item yang ditetapkan kepada 'flex: 0 0 25%' terbukti mencabar, kerana 1% mewujudkan jarak yang berlebihan. Untuk menyelesaikan masalah ini, pertimbangkan pendekatan berikut:

Dalam coretan CSS yang disediakan, kelas 'foto' mempunyai 'flex: 0 0 25%'. Untuk mencapai margin 1px, anda boleh mengubah suai tetapan ini kepada 'flex: 1 0 22%'. Ini akan memperuntukkan 22% untuk asas fleksibel item, memastikan empat elemen setiap baris. Flex-grow ditetapkan kepada 1, menyebabkan item mengembang dan menggunakan ruang margin yang tinggal.

 paparan : flex;<br> flex-wrap: wrap;<br> justify-content: space-round;<br> margin: 10px;<br>}</p><p>/<em> Jidar dikemas kini untuk jarak 1px </em>/<br>.foto {<br> lentur: 1 0 22%;<br> ketinggian min: 50px; <br> jidar: 1px;<br> warna latar belakang: merah;<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>

Dengan pelarasan ini, setiap Elemen 'foto' akan mengekalkan lebar 22% yang diingini, sambil memperolehi rangup margin 1px. Penyelesaian ini menangani situasi dengan berkesan dan memberikan kawalan yang lebih besar ke atas reka letak kotak flex anda.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Margin 1px yang Tepat pada Item Flex dengan `flex: 0 0 25%`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!