Rumah  >  Artikel  >  hujung hadapan web  >  Mengapa Item Flex Mengabaikan Margin dan Saiz Kotak: Masalah kotak sempadan?

Mengapa Item Flex Mengabaikan Margin dan Saiz Kotak: Masalah kotak sempadan?

Susan Sarandon
Susan Sarandonasal
2024-11-03 18:07:29684semak imbas

Why Are Flex Items Ignoring Margins and Box-Sizing: A border-box Problem?

Item Fleksibel Tidak Menghormati Jidar dan Saiz Kotak: 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!

Kenyataan:
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