Mengapa Bungkus Fleksibel Tidak Berfungsi dengan Saiz Kotak: Kotak Sempadan dan Margin?

Memahami Jidar Item Flexbox dan Saiz Kotak

Latar Belakang:

Flexbox ialah modul reka letak yang berkuasa, memberikan kawalan ke atas saiz dan pengagihan elemen. Sifat bersaiz kotak, sebaliknya, menentukan cara pelapik dan jidar mempengaruhi dimensi elemen.

Dalam senario anda, anda menjangkakan item flex akan mengecil agar sesuai dengan tiga lajur, walaupun dengan saiz kotak: jidar- kotak. Walau bagaimanapun, anda menghadapi masalah apabila balut fleksibel tidak berfungsi seperti yang anda jangkakan.

Penjelasan:

Adalah penting untuk ambil perhatian bahawa saiz kotak: kotak sempadan termasuk pelapik dan sempadan dalam pengiraan lebar / ketinggian, tetapi bukan jidar. Margin sentiasa dikira secara berasingan.

Tetapan Bekas Flex Lalai:

Tetapan awal untuk bekas fleksibel ialah pengecutan fleksibel: 1. Ini bermakna item fleksibel boleh mengecut kepada muat dalam bekas, berkemungkinan mengatasi lebar, ketinggian atau nilai asas lentur yang ditentukan.

Penyelesaian:

Untuk mencapai reka letak yang anda inginkan, anda boleh melaraskan lentur- harta asas kepada nilai yang menampung margin sambil turut menguatkuasakan pembalut. Ini akan membolehkan flex-grow mengagihkan ruang yang tinggal sama rata, tidak menceroboh ruang margin.

CSS terlaras:

<code class="css">* {
  box-sizing: border-box;
}

.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>

Kesimpulan:

Dengan memahami interaksi antara jidar item flexbox dan saiz kotak, anda boleh mengawal saiz dan peletakan elemen dalam reka letak anda dengan berkesan.

Atas ialah kandungan terperinci Mengapa Bungkus Fleksibel Tidak Berfungsi dengan Saiz Kotak: Kotak Sempadan dan Margin?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!