Bagaimanakah Margin Mempengaruhi Saiz Flex-Grow dalam Reka Letak Flexbox?

Saiz Elemen Flex Menggunakan Flex-Grow

Dalam susun atur flexbox, item flex bersaiz mengikut flex-grow mereka harta benda, yang menentukan jumlah ruang kosong yang perlu diduduki oleh setiap item. Walau bagaimanapun, terdapat faktor tertentu yang boleh mempengaruhi saiz pengiraan item fleksibel, termasuk kandungan dan margin.

Gambaran Keseluruhan Isu

Pertimbangkan kod berikut:

.numbers {
    display: flex;
    flex-direction: column;
}

.row {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    justify-content: space-between;
}

.button {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    margin: 5px;
    border-radius: 5px;
    border: 1px solid gray;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
}

#number0 {
    flex-grow: 2;
}

#colon {
    flex-grow: 1;
}

<div class="numbers">
    <div class="row">
        <div class="button number">
<p>Dalam contoh ini, kami menjangkakan butang "0" dua kali lebih lebar daripada butang lain, dan butang bertindih separuh lebar. Walau bagaimanapun, penjajaran butang ini nampaknya terkeluar sedikit.</p>
<p></p>
<h3 id="Punca-Isu">Punca Isu</h3>
<p>Isu timbul kerana ruang yang tersedia pada setiap baris ditentukan oleh jumlah lebar butang dan jidar yang digunakan padanya. Dalam contoh kami, tiga baris pertama mempunyai dua margin mendatar setiap satu, manakala baris keempat hanya mempunyai satu. Ini menyebabkan baris keempat mempunyai lebih banyak ruang kosong daripada baris lain, yang menjejaskan pengagihan ruang antara item fleksibel.</p>
<p></p>
<h3 id="Menggunakan-Flex-Basis-untuk-Saiz-Lebih-Boleh-Dipercayai">Menggunakan Flex-Basis untuk Saiz Lebih Boleh Dipercayai</h3>
<p>Untuk menangani isu ini, adalah disyorkan untuk menggunakan <strong>flex-basis</strong> dan bukannya <strong>flex-grow</strong> untuk saiz item flex yang lebih dipercayai. Flex-basis menetapkan saiz awal item, dengan mengambil kira kandungan dan marginnya. Dengan menyatakan asas-flex untuk setiap butang, kami boleh memastikan bahawa kesemuanya diberi jumlah ruang yang sama, tanpa mengira jidar.</p>
<p>Berikut ialah kod yang diperbetulkan:</p>
<pre class="brush:php;toolbar:false">.button {
    flex-basis: 33.33%;
}

#number0 {
    flex-basis: calc(66.67% + 10px);
}

* {
    box-sizing: border-box;
}

Oleh mengemas kini asas fleksibel, kita boleh mencapai penjajaran butang yang diingini, dengan butang "0" adalah dua kali lebih lebar daripada butang lain dan butang kolon menjadi separuh lebar.