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

DDD
Lepaskan: 2024-11-02 18:51:31
asal
393 orang telah melayarinya

Why Don't Flex Items Shrink to Fit Three Per Row with Margins and `border-box` Sizing?

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan