Bagaimana Membuat Item Flex Menggunakan Lebar Kandungan Daripada Lebar Bekas Induk?

Cara Membuat Item Flex Mengambil Lebar Kandungan Daripada Lebar Bekas Induk

Apabila menggunakan bekas dengan paparan: flex dan elemen kanak-kanak dibalut dalam, anda mungkin menghadapi isu di mana lebar kanak-kanak mengembang untuk sepadan dengan bekas induk dan bukannya ditentukan olehnya sendiri kandungan.

Penyelesaian:

Untuk membetulkan isu ini dan memastikan bahawa lebar kanak-kanak ditentukan oleh kandungannya, ikuti langkah berikut:

1. Gunakan align-item: flex-start pada bekas induk. Ini akan mengatasi tetapan lalai item jajar: regangan, yang menyebabkan item lentur meregang ke lebar penuh bekas.
2. Sebagai alternatif, anda boleh menggunakan align-self: flex-start terus ke item flex sendiri. Ini akan mengehadkan tetapan kepada item tertentu dan bukannya menjejaskan semua item flex dalam bekas.

Ringkasnya, dengan menggunakan align-item: flex-start pada bekas atau align-self: flex- bermula pada item, anda boleh menghalang elemen anak daripada mewarisi sifat regangan ibu bapa dan membenarkan lebarnya ditentukan oleh kandungannya.

Atas ialah kandungan terperinci Bagaimana Membuat Item Flex Menggunakan Lebar Kandungan Daripada Lebar Bekas Induk?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!