Mengapa Item Flex Saya Mengabaikan Margin Apabila Menggunakan `bersaiz kotak: kotak sempadan`?

Susan Sarandon
Lepaskan: 2024-11-02 06:07:02
asal
208 orang telah melayarinya

Why Are My Flex Items Ignoring Margins When Using `box-sizing: border-box`?

Item Fleksibel Mengabaikan Jidar dengan saiz kotak: kotak sempadan

Flexbox boleh menjadi rumit apabila ia berkaitan dengan jidar dan saiz kotak. Secara lalai, jidar tidak termasuk dalam pengiraan saiz item fleksibel, walaupun semasa menggunakan saiz kotak: kotak sempadan.

Memahami Model Kotak

The model kotak ialah konsep CSS yang mentakrifkan dimensi dan susun atur elemen. Ia terdiri daripada empat bahagian:

  • Kotak kandungan: Saiz kandungan sebenar elemen.
  • Padding: Ruang lutsinar di dalam sempadan.
  • Sempadan: Garisan yang boleh dilihat di sekeliling elemen.
  • Margin: Ruang lutsinar di luar sempadan.

bersaiz kotak

Sifat bersaiz kotak menentukan cara pelapik dan sempadan dikira ke dalam saiz keseluruhan elemen. Ia mempunyai dua nilai yang mungkin:

  • kotak kandungan (lalai): Pelapik dan sempadan ditambahkan pada kotak kandungan.
  • kotak sempadan: Pelapik dan sempadan disertakan dalam elemen saiz.

Sifat Flexbox

Dalam flexbox, sifat berikut berkaitan dengan susun atur item flex:

  • flex- tumbuh: Menentukan jumlah ruang tambahan yang perlu diambil oleh item apabila terdapat ruang kosong.
  • flex-shrink: Menentukan jumlah item harus mengecut untuk dimuatkan dalam bekas.
  • flex-basis: Mentakrifkan saiz ideal item sebelum menggunakan flex-grow atau flex-shrink.

Penyelesaian

Untuk memastikan item flex menghormati margin sambil saiz kotak: kotak sempadan digunakan, pertimbangkan perkara berikut:

  • Nyatakan pengecutan fleksibel: 0 pada item fleksibel untuk mengelakkannya daripada mengecut.
  • Laraskan nilai asas-flex untuk mengambil kira kedua-dua saiz kandungan dan margin.

Sebagai contoh, dalam kod anda:

header>span {
  flex: 1 0 26%; /* Adjusted from 1 1 33.33% */
  margin: 10px;
}
Salin selepas log masuk

Dengan melaraskan asas-flex, kami memastikan terdapat ruang yang mencukupi untuk kedua-duanya kandungan dan margin.

Atas ialah kandungan terperinci Mengapa Item Flex Saya Mengabaikan Margin Apabila Menggunakan `bersaiz kotak: 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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan