Mengapa Item Tidak Fleksibelkan Mengecut untuk Muat Tiga Setiap Baris dengan Jidar dan Saiz `kotak sempadan`?

Item Fleksibel Mengabaikan Jidar dan Saiz Kotak Sempadan

Dalam kotak fleksibel, dengan menetapkan flex: 1 1 33.33% dan jidar: 10px pada flex item, seseorang mungkin menjangkakan tiga kotak setiap baris. Walau bagaimanapun, dengan flex-wrap: wrap, kotak tidak mengecut untuk memuatkan tiga setiap baris.

Puncanya terletak pada sifat saiz kotak: border-box. Walaupun sifat ini termasuk pelapik dan sempadan dalam pengiraan lebar dan ketinggian, ia tidak termasuk jidar. Margin dikira secara berasingan dan secara lalai, item flex mempunyai pengecutan fleksibel: 1, membenarkan ia mengecut untuk muat dengan bekas.

Untuk menyelesaikan isu ini, seseorang boleh mengatasi kelakuan lalai dengan menetapkan flex- mengecut: 0. Ini menghalang item flex daripada mengecut ke dalam margin.

Penyelesaian lain adalah untuk melaraskan nilai asas-flex sambil mengekalkan flex-grow: 1. Memandangkan tidak ada keperluan untuk flex-basis untuk menguatkuasakan balutan disebabkan penggunaan ruang kosong yang berkembang fleksibel, seseorang boleh mengurangkan nilai untuk menampung margin. Dengan menetapkan fleksibel: 1 1 26% dan jidar: 10px, contohnya, item fleksibel kini sesuai seperti yang dijangkakan.

Atas ialah kandungan terperinci Mengapa Item Tidak Fleksibelkan Mengecut untuk Muat Tiga Setiap Baris dengan Jidar dan Saiz `kotak sempadan`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!