Membuat lebar dan item fleksibel bermain bagus bersama

Jawapan ringkas: flex-shrink dan flex-basis sifat kemungkinan besar penyelesaian yang anda cari.

Jawapan terperinci

Katakan anda mahu imej dan teks disusun bersebelahan seperti ini:

Sekarang, katakan anda menggunakan Flexbox untuk mencapai matlamat ini. Menetapkan elemen induk untuk display: flex; adalah permulaan yang baik.

 <code>.container { display: flex; }</code>

Keluarkan ……

Alamak! Ok, saya fikir ini boleh diterima. Adalah masuk akal bahawa imej itu dekat dengan teks, kerana kita tidak menetapkan lebar imej. Idealnya, kami mahu imej mempunyai lebar tetap, dan teks kemudian mengambil ruang yang tinggal.

Ok, mari kita buat!

 <code>.container { display: flex; } img { width: 50px; margin-right: 20px; }</code>

Ini kelihatan hebat dalam krom. Tetapi tunggu, apa? Jika kita menyemak tag imej di Firefox Devtools, kita akan mendapati bahawa ia bukan nilai lebar yang kita tetapkan sama sekali:

Kita boleh menggunakan min-width untuk memaksa imej untuk mencapai lebar 50px yang kita mahukan:

 <code>img { min-width: 50px; margin-right: 20px; }</code>

Walau bagaimanapun, ini hanya akan membantu menetapkan lebar, jadi kita perlu menambah margin juga.

 <code>img { min-width: 50px; margin-right: 20px; }</code>

Itu sahaja. Lebih baik di Firefox, dan masih berfungsi di Chrome.

Jawapan yang lebih terperinci

Saya menyedari bahawa imej itu dimampatkan kerana kita perlu menggunakan harta flex-shrink untuk memberitahu item flex untuk tidak mengurangkan saiz, tanpa mengira sama ada mereka mempunyai lebar atau tidak.

Nilai flex-shrink semua projek flex adalah 1. Kita perlu menetapkan elemen imej kepada 0:

 <code>.container { display: flex; } img { width: 50px; margin-right: 20px; flex-shrink: 0; }</code>

Lebih baik dan lebih baik! Tetapi kita masih boleh membuat lebih banyak penambahbaikan.

Jawapan terakhir

Kita boleh menyusunnya lebih jauh kerana flex-shrink dimasukkan ke dalam harta singkatan flex .

 <code>flex: none | [ ? || ]</code>

Jika kita menetapkan nilai flex-shrink kepada 0 dan menetapkan nilai flex-basis ke lebar lalai yang kita mahu imej itu, maka kita boleh menyingkirkan atribut width sepenuhnya.

 <code>.container { display: flex; } img { flex: 0 0 50px; margin-right: 20px; }</code>

Oh, ya:

Contoh lain

Harta flex-shrink menyelesaikan banyak masalah lain, dan sangat penting jika anda ingin mula menggunakan Flexbox. Berikut adalah satu lagi contoh mengapa: Saya tersandung pada soalan lain yang serupa dengan perkara di atas, yang saya sebutkan dalam buletin baru -baru ini. Saya membina komponen navigasi yang membolehkan pengguna menatal pelbagai projek kiri dan kanan. Semasa memeriksa kerja saya, saya melihat isu -isu berikut:

Item navigasi yang lebih lama tidak boleh membungkus seperti itu - tetapi akhirnya saya mendapat mengapa ini berlaku, terima kasih kepada soalan -soalan sebelumnya. Jika anda menetapkan harta flex-shrink kepada 0, ia akan memberitahu setiap item dalam navigasi ini untuk tidak mengecut, tetapi untuk mengambil lebar kandungan, seperti berikut:

Ya, kita boleh mengambil langkah tambahan sekali lagi untuk menggunakan atribut flex , kali ini menggunakan auto sebagai flex-basis kerana kita ingin mempertimbangkan sebanyak mungkin ruang untuk semua item apabila memperuntukkan ruang dalam bekas navigasi.

Long Live! Kami menyelesaikannya. Walaupun jawapannya hanyalah garis kod, adalah penting untuk mewujudkan unsur -unsur yang benar -benar fleksibel.

Atas ialah kandungan terperinci Membuat lebar dan item fleksibel bermain bagus bersama. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!