Rumah > Artikel > hujung hadapan web > Mengapa Item Flex Mengabaikan Margin dan Saiz Kotak: Masalah kotak sempadan?
Dalam CSS, sifat saiz kotak menentukan cara lebar dan tinggi elemen dikira, termasuk sebarang padding atau sempadan. Apabila ditetapkan kepada kotak sempadan, dimensi elemen termasuk kedua-dua pelapik dan sempadan. Walau bagaimanapun, margin sentiasa dikira secara berasingan, tanpa mengira sifat bersaiz kotak.
Apabila menggunakan Flexbox, tetapan flex kepada 1 1 33.33% dengan jidar: 10px menghasilkan gelagat yang tidak dijangka. Walaupun Flexbox biasanya mengagihkan ruang yang tersedia secara sama rata antara item, margin tidak diambil kira dalam senario ini. Akibatnya, jangkaan tiga item setiap baris tidak tercapai.
Untuk menyelesaikan isu ini, sifat flex-basis boleh dilaraskan. Dalam contoh yang disediakan, asas-flex ditetapkan kepada 26%, iaitu lebar yang dikehendaki bagi setiap item tolak jidar. Dengan memastikan margin tidak difaktorkan ke dalam asas fleksibel, Flexbox menjajarkan item dengan betul dan membalutnya seperti yang dimaksudkan.
<code class="css">.horizontal-layout { display: flex; width: 400px; } header > span { flex: 1 0 26%; /* ADJUSTED */ margin: 10px; } header#with-border-padding { flex-wrap: wrap; } header#with-border-padding>span { flex: 1 0 26%; /* ADJUSTED */ }</code>
Atas ialah kandungan terperinci Mengapa Item Flex Mengabaikan Margin dan Saiz Kotak: Masalah kotak sempadan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!