Bagaimanakah Harta `paparan` Mempengaruhi Susun Atur Item Flexbox?

Memahami Sifat Paparan dalam Item Flexbox

Dalam Flexbox, sifat paparan mengawal reka letak elemen kanak-kanak dalam bekas fleksibel. Walaupun item flex lalai kepada paparan: sekat, mengubah suai sifat ini boleh memperkenalkan kesan menarik dan faedah berfungsi. Dua pilihan biasa ialah display:block dan display:inline-block.

Pertimbangan Utama:

Spesifikasi CSS menjelaskan bahawa tetapan paparan kepada nilai peringkat sebaris seperti display:inline-block akan dikira kepada nilai peringkat blok (dalam kes ini, sekat) apabila digunakan sebagai anak bekas fleksibel. Oleh itu, tiada perbezaan praktikal antara display:block dan display:inline-block dalam item flexbox.

Walau bagaimanapun, tetapkan paparan kepada table, jadual sebaris, grid sebaris, atau grid boleh memberi kesan yang ketara. Dalam kes ini, item fleksibel akan menggunakan gelagat jenis paparan yang ditentukan.

Contoh:

Pertimbangkan kod berikut:

.box {
  display: flex;
  margin:5px;
}

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

span {
  border: 2px solid green;
}

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

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

<div class="box">
  <div>

Dalam kotak pertama, sifat display:grid mengubah item flex menjadi grid, dengan dua lajur dan satu baris. Rentang di dalam grid dijajarkan mengikut reka letak grid.

Dalam kotak kedua, tetapan display:inline-grid menghasilkan grid sebaris, di mana rentang dibentangkan secara mendatar dan bukannya secara menegak.

Dengan memanipulasi sifat paparan, anda boleh memanfaatkan kuasa Flexbox dan jenis paparan lain untuk mencipta fleksibel dan kompleks reka letak.

Atas ialah kandungan terperinci Bagaimanakah Harta `paparan` Mempengaruhi Susun Atur Item Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!