Bagaimana untuk melaksanakan susun atur dua lajur melalui susun atur CSS Flex

Cara melaksanakan susun atur dua lajur melalui susun atur elastik CSS Flex

Susun atur elastik CSS Flex ialah teknologi susun atur moden yang boleh memudahkan halaman web Proses susun atur membolehkan pereka bentuk dan pembangun membuat reka letak yang fleksibel dan boleh disesuaikan dengan pelbagai saiz skrin dengan mudah. Antaranya, melaksanakan susun atur dua lajur adalah salah satu keperluan biasa dalam susun atur Flex. Dalam artikel ini, kami akan memperkenalkan cara menggunakan reka letak elastik CSS Flex untuk melaksanakan reka letak dua lajur yang mudah dan menyediakan contoh kod khusus.

Menggunakan Bekas dan Item Flex

Apabila menggunakan susun atur Flex, kita memerlukan bekas induk untuk membungkus kandungan susun atur kita. Bekas flex boleh dibuat dengan menetapkan sifat paparan kepada "flex" atau "inline-flex". Secara khusus, kita boleh mencipta bekas Flex melalui kod berikut:

Seterusnya, kita perlu mencipta dua kanak-kanak dalam bekas Flex, iaitu susun atur dua lajur kami. Subprojek ini dipanggil projek Flex. Dalam bekas Flex, kita boleh mengawal saiz dan keanjalan setiap item dengan menetapkan sifat flex kepada "1" atau nilai lain. Khususnya, kami boleh mencipta dua projek Flex melalui kod berikut:

Tetapkan susun atur Flex

Untuk mencapai susun atur dua lajur, kita perlu menyediakan Flex kontena dan harta berkaitan projek. Pertama, kita perlu menyusun kanak-kanak dalam bekas Flex secara mendatar Ini boleh dicapai dengan menetapkan sifat arah flex bekas kepada "baris". Secara khusus, kita boleh menetapkan sifat bekas Flex melalui kod berikut:

.container { display: flex; flex-direction: row; }

Seterusnya, kita boleh mengawal ruang yang diduduki oleh setiap item dengan menetapkan sifat flex item tersebut. Di sini, kita boleh menggunakan unit relatif, seperti "fr" (singkatan untuk pecahan flex-grow property), untuk menentukan perkadaran yang diduduki oleh kanak-kanak. Secara khusus, kita boleh menetapkan sifat item Flex melalui kod berikut:

.item { flex: 1; }

Di sini, kami menggunakan flex: 1 untuk menetapkan ruang yang diduduki oleh setiap item kepada perkadaran yang sama. Jika kita mahu lajur kiri mengambil lebih banyak ruang, kita boleh melaraskan nilai flex item yang sepadan. Sebagai contoh, untuk lajur kiri, kita boleh menetapkan sifat lentur kepada "2", dan untuk lajur kanan, kita boleh menetapkan sifat lentur kepada "1".

Contoh kod penuh

Berikut ialah contoh kod lengkap yang menunjukkan cara menggunakan CSS Flex untuk melaksanakan reka letak dua lajur yang mudah:

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan susun atur dua lajur melalui susun atur CSS Flex. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!