Bagaimana untuk Membuat Lebar Item Flex Ditentukan oleh Kandungan, Bukan Bekas Induk?

Cara Membuat Item Flex Menduduki Lebar Kandungan Daripada Lebar Induk

Flexbox menyediakan cara yang mudah untuk mengatur elemen. Walau bagaimanapun, secara lalai, item flex memanjang ke lebar bekas induknya. Tingkah laku ini mungkin tidak selalu diingini.

Masalah:

Anda mempunyai bekas fleksibel dengan elemen penambat kanak-kanak (). Bagaimanakah anda boleh menjadikan kanak-kanak itu kelihatan "sebaris", dengan lebarnya ditentukan oleh kandungannya dan bukannya mengembangkan kepada lebar penuh induk?

Percubaan Gagal:

Menetapkan memaparkan harta kanak-kanak kepada inline-flex tidak kerja.

Penyelesaian:

Gunakan strategi berikut:

1. Gunakan align-item: flex-start pada Bekas:

Ini menetapkan penjajaran semua item flex secara menegak ke atas. Ia mengatasi penjajaran "regangan" lalai, menghalang item daripada mengembang kepada lebar induk penuh.

2. Gunakan align-self: flex-start pada Item Flex:

Ini menetapkan penjajaran item flex khusus ke atas, mengawal penjajaran sendiri secara bebas daripada flex yang lain item.

Contoh:

.container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

a {
  padding: 10px 40px;
  background: pink;
}

Penjelasan:

Dengan menggunakan align-item: flex-start atau align -self: flex-start, anda dengan berkesan mengatakan bahawa item flex yang berkaitan harus sejajar dengan bahagian atas bekas di sepanjang paksi silang (menegak) dan tidak boleh mengembang kepada lebar induk penuh. Ini membolehkan lebar item ditentukan oleh kandungannya, mencapai kesan "sebaris" yang diingini.

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