Bagaimanakah Saya Boleh Membuat Barangan Flexbox Mengembang Secara Berkadar Berdasarkan Saiz Asalnya?

Membesarkan Item Flex-Grow Berdasarkan Saiz Asal

Apabila menggayakan elemen dengan Flexbox, adalah wajar untuk mengagihkan baki ruang dalam bekas di antara item. Walau bagaimanapun, secara lalai, flex-grow memberikan lebar yang sama kepada semua item, tanpa mengira saiz awalnya. Untuk mengekalkan perbezaan ini, pertimbangkan untuk menetapkan flex-grow kepada 'auto' dan bukannya '1'.

Penjelasan

Flex-grow beroperasi berdasarkan dua parameter: ruang kosong yang tersedia dan flex-basis. Ruang bebas merujuk kepada ruang yang tinggal di dalam bekas yang boleh diagihkan di antara item flex. Flex-basis menentukan saiz awal setiap item sebelum pengedaran.

Saiz Mutlak (flex: 1):

• Apabila flex-basis ditetapkan kepada 0 , flex-grow menganggap keseluruhan ruang yang ada sebagai ruang kosong.
• Ini menghasilkan saiz yang sama secara berkadar untuk semua item, tanpa mengira kandungan asalnya.

Saiz Relatif (flex: auto):

• Apabila asas-flex ialah auto (lalai), flex -grow mengambil kira saiz kandungan setiap item.
• Hanya baki ruang dalam bekas kemudian diagihkan secara berkadar pada nilai flex-grow.

Contoh:

Pertimbangkan tiga butang dengan lebar yang berbeza-beza. Kami mahu mereka mengisi baki lebar bekas, masing-masing mengekalkan saiz berkadarnya.

.row-flex {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.button {
  flex: auto;     // Relative sizing to maintain original proportions
  display: inline-block;
  padding: 10px;
  color: #fff;
  text-align: center;
}

Dengan menetapkan flex-grow kepada auto, butang akan mengembang daripada saiz semasanya secara berkadar, mengisi ruang yang tersedia sambil mengekalkan perbezaan saiz awalnya.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Barangan Flexbox Mengembang Secara Berkadar Berdasarkan Saiz Asalnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!