Bagaimanakah Saya Boleh Membuat Item Flex Disesuaikan dengan Lebar Kandungannya dalam CSS?

Membuat Item Fleksibel Menyesuaikan Diri dengan Lebar Kandungan

Menggunakan CSS flexbox untuk menjajarkan elemen kadangkala boleh mengakibatkan item mengembang melebihi lebar yang dimaksudkan. Ini boleh mengecewakan terutamanya apabila anda mahu lebar item ditentukan oleh kandungannya, bukannya lebar bekas induknya.

Penyelesaian:

Untuk membuat flex item menyesuaikan diri dengan lebar kandungannya, anda boleh menggunakan dua sifat:

1. Align-Items: Flex-Start

Pada bekas induk, tetapkan align-item kepada flex-start. Ini menjajarkan item di sepanjang paksi silang (mendatar dalam kes anda) ke tepi permulaan bekas.

2. Align-Self: Flex-Start

Sebagai alternatif, anda boleh menggunakan align-self: flex-start terus pada item flex. Ini mengatasi sifat align-self lalai, yang diwarisi daripada bekas induk.

Contoh:

Pertimbangkan kod berikut:

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

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

Ini akan mengakibatkan elemen menyesuaikan lebarnya kepada kandungannya, sambil masih menjajarkan secara menegak dalam bekas.

Penjelasan:

Dengan menggunakan align-item: flex-start atau align-self: flex-start, anda mengatasi gelagat regangan lalai untuk item flex. Ini memastikan bahawa item hanya menggunakan ruang yang diperlukan untuk kandungannya, dan bukannya mengembang mengikut lebar induknya.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Item Flex Disesuaikan dengan Lebar Kandungannya dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!