Bagaimanakah Saya Boleh Membuat Item Flexbox Mengembang Secara Berkadar Berdasarkan Saiz Awalnya?

Buat Flex-Grow Expand Item Berdasarkan Saiz Asalnya

Memahami Isu

Dalam situasi anda, anda telah berbilang butang disusun dalam satu baris menggunakan flexbox. Anda mahu butang ini meningkatkan lebarnya secara berkadar untuk mengisi ruang baris yang tinggal sambil mengekalkan perbezaan lebar asalnya. Walau bagaimanapun, menetapkan flex: 1 pada setiap butang menyebabkan semua butang menjadi sama lebar.

Penyelesaian: Tukar kepada Flex: Auto

Kunci untuk mencapai keinginan anda hasil terletak pada memilih nilai yang betul untuk flex-grow. Daripada flex: 1, anda harus menggunakan flex: auto.

Cara Flex-Grow Berfungsi

flex-grow mengagihkan ruang kosong dalam bekas antara item flex berdasarkan dua faktor:

• Ruang kosong: Ruang yang tidak digunakan dalam baris/lajur.
• Asas fleksibel: Saiz awal item flex sebelum memfaktorkan dalam flex-grow.

Penjelasan

Apabila menggunakan flex: 1, anda menetapkan asas-flex kepada 0 dan flex-grow kepada 1. Ini bermakna bahawa flexbox menganggap semua ruang dalam baris sebagai ruang kosong, menghasilkan pengagihan sama rata antara semua item tanpa mengira kandungannya.

Sebaliknya, flex: auto menetapkan asas-flex kepada auto, yang mempertimbangkan saiz kandungan item sebelum mengagihkan ruang kosong. Ini memastikan item mengekalkan perbezaan saiz asalnya sambil masih mengisi ruang baris yang tinggal.

Contoh

Dalam kod anda, gantikan flex: 1 dengan flex: auto untuk setiap butang:

.button {
  flex: auto;  // Change from flex: 1
  display: inline-block;
  padding: 10px;
  color: #fff;
  text-align: center;
}

Ini akan membolehkan butang berkembang berdasarkan lebar asalnya, memenuhi keperluan anda keperluan.

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