Bagaimanakah Saya Boleh Membuat Saiz Asal Item Flex-Grow Respect dalam Susun Atur Flex?

Buat Flex-Grow Kembangkan Item Berdasarkan Saiz Asalnya

Dalam susun atur flex, sifat flex-grow boleh digunakan untuk mengagihkan ruang yang tersedia secara berkadar antara item. Walau bagaimanapun, secara lalai, flex-grow mengabaikan saiz asal item ini.

Masalah: Saiz Item Disamakan

Apabila menggunakan flex dengan flex-grow ditetapkan kepada 1, semua item dalam regangan baris untuk mengisi ruang yang tersedia, menghasilkan sama lebar:

.container {
  display: flex;
}

.item {
  flex: 1;
}

<div class="container">
  <div class="item">Single</div>
  <div class="item">Larger title</div>
  <div class="item">Another really large title</div>
</div>

Penyelesaian: Saiz Relatif dengan flex-auto

Untuk mengembangkan item berdasarkan saiz asal mereka, kita boleh menggunakan flex-basis: auto. Ini memberitahu penyemak imbas untuk mempertimbangkan saiz kandungan semasa mengira ruang yang tersedia.

.container {
  display: flex;
}

.item {
  flex: auto;
}

Dengan flex: auto, item kini akan mengisi ruang yang tersedia secara berkadar dengan lebar asalnya:

Penjelasan

flex-grow masih menentukan bagaimana ruang kosong itu diedarkan, tetapi nilai asas-flex diambil kira terlebih dahulu. Jika asas-flex adalah auto, penyemak imbas menentukan saiz intrinsik setiap item dan menolaknya daripada ruang yang tersedia. Baki ruang kemudiannya diagihkan berdasarkan nilai flex-grow.

Dalam contoh kami, semua item mempunyai nilai flex-grow yang sama (1), jadi ruang yang tersedia diagihkan sama rata. Walau bagaimanapun, memandangkan item dengan tajuk yang lebih besar mempunyai saiz intrinsik yang lebih luas, ia menerima bahagian yang lebih besar daripada ruang yang tinggal.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Saiz Asal Item Flex-Grow Respect dalam Susun Atur Flex?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!