Bagaimana untuk Menghalang Item Flex daripada Regangan kepada Lebar Bekas?

Cara Memaksa Item Fleksibel agar Sesuai dengan Kandungan, Bukan Lebar Bekas

Dalam susun atur fleksibel, elemen secara semula jadi meregang untuk memenuhi lebar induknya bekas. Ini boleh menjadi tidak diingini apabila anda mahu elemen kanak-kanak membungkus kandungannya sahaja. Begini cara untuk menguatkuasakan tingkah laku ini:

Penyelesaian Menggunakan align-items/align-self

Tetapkan align-item: flex-start pada bekas, atau align-self : flex-mula pada item flex. Ini mengatasi item penjajaran lalai: regangan, yang menyebabkan item mengembang untuk memenuhi ruang mendatar bekas apabila arah lentur ialah lajur.

Cara Ia Berfungsi

Dengan menetapkan item align-item: flex-start, anda memaksa item untuk menjajarkan diri mereka ke tepi permulaan bekas. Oleh kerana arah lajur ditetapkan, tepi permulaan ialah tepi kiri. Ini memaksa item kekal seluas kandungannya sahaja.

Contoh:

.container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
a {
  padding: 10px 40px;
  background: pink;
}

Konsep Berkaitan

• Paksi Silang: Paksi berserenjang dengan paksi susun atur utama (secara mendatar dalam reka letak lajur).
• item sejajar: Menjajarkan item lentur di sepanjang paksi silang.
• sejajarkan-diri: Serupa dengan penjajaran -item, tetapi khusus untuk item fleksibel individu.

Atas ialah kandungan terperinci Bagaimana untuk Menghalang Item Flex daripada Regangan kepada Lebar Bekas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!