Adakah Tetapan `paparan` pada Item Flexbox Menawarkan Kelebihan Sebenar Melangkaui Gelagat Lalai?

Meneroka Kepentingan Harta Paparan dalam Item Kotak Flex

Soalan:

Boleh melaraskan sifat paparan fleksibel individu item kotak memberikan apa-apa kelebihan atau hasil yang berbeza? Secara khususnya, apakah implikasi menetapkan paparan kepada menyekat atau menyekat sebaris?

Jawapan:

Spesifikasi CSS menjelaskan bahawa nilai paparan peringkat sebaris ditetapkan kepada item fleksibel akan ditukar kepada rakan sejawat peringkat blok mereka. Oleh itu, menetapkan paparan secara eksplisit kepada menyekat atau menyekat sebaris tidak akan menghasilkan perubahan yang boleh dilihat kerana kedua-duanya memutuskan untuk menyekat.

Walau bagaimanapun, kesan ketara boleh timbul apabila sifat paparan ditetapkan kepada jadual, jadual sebaris, grid sebaris , atau grid. Dalam kes ini, item fleksibel akan menggunakan ciri jenis paparan yang ditentukan, mengubah persembahan dan tingkah lakunya.

Pertimbangkan contoh HTML dan CSS berikut:

<div class="box">
  <div>
    <span></span>

    <span></span>
  </div>
</div>

<div class="box">
  <div>
<pre class="brush:php;toolbar:false">.box {
  display: flex;
  margin: 5px;
}

.box > div {
  height: 50px;
  width: 100%;
  background: red;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 1fr;
  grid-gap: 20px;
}

span {
  border: 2px solid green;
}

Dalam kotak pertama, sifat paparan untuk div bersarang tidak ditetapkan secara eksplisit. Akibatnya, paparan disekat lalai akan digunakan. Sebaliknya, dalam kotak kedua, paparan ditetapkan kepada grid sebaris, menyebabkan div dalam berkelakuan sebagai elemen grid. Ini terbukti daripada sempadan hijau di sekeliling bentangan, yang menyelaraskan diri mereka dengan sewajarnya.