Bagaimana untuk menjadikan lebar elemen kanak -kanak menyesuaikan diri dengan kandungan tanpa mengisi bekas induk dalam susun atur flex?

Susun atur Flex dengan bijak untuk mencapai lebar penyesuaian kandungan elemen kanak -kanak

Apabila menggunakan susun atur flex, selalunya perlu lebar elemen kanak -kanak diselaraskan secara automatik mengikut kandungan dan bukannya mengisi seluruh bekas induk. Sebagai contoh, dalam bekas flex yang diatur secara menegak, bagaimanakah lebar unsur -unsur kanak -kanak menyesuaikan diri dengan kandungan sambil mengekalkan warna latar belakang yang dipaparkan utuh, dan mengelakkan secara manual menetapkan lebar tetap, mengakibatkan paparan kandungan yang tidak lengkap? Artikel ini akan memberikan penyelesaian ringkas.

Senario Masalah:

Katakan bekas flex, mengatur dua blok secara menegak. Bahagian atas kandungan boleh disesuaikan dengan lebar, dan bahagian yang lebih rendah (contohnya, blok "VAT normal invois") juga perlu menyesuaikan diri dengan lebar mengikut kandungan untuk mengelakkan limpahan warna latar belakang dan mencegah paparan kandungan yang tidak lengkap.

Soalan Teras: Cara Membuat Lebar "Invois Normal VAT" blok menyesuaikan secara dinamik berdasarkan kandungan, dan bukannya menduduki seluruh lebar bekas induk.

Penyelesaian:

Kuncinya adalah untuk menetapkan atribut width blok "VAT normal invois" kepada fit-content . Atribut fit-content secara automatik akan menyesuaikan lebar elemen mengikut saiz kandungannya, menyelesaikan masalah limpahan warna latar belakang dan paparan kandungan yang tidak lengkap, memastikan kandungan dipaparkan sepenuhnya sambil mengekalkan koordinasi visual. Hanya tetapkan harta ini untuk mencapai kesan yang diingini.

Atas ialah kandungan terperinci Bagaimana untuk menjadikan lebar elemen kanak -kanak menyesuaikan diri dengan kandungan tanpa mengisi bekas induk dalam susun atur flex?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!