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:

<div class="container">
  <!-- 布局的内容 -->
</div>

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:

<div class="container">
  <div class="item">
    <!-- 左栏内容 -->
  </div>
  <div class="item">
    <!-- 右栏内容 -->
  </div>
</div>

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:

rreee#🎜 🎜 #Dalam contoh ini, kami menggunakan gaya CSS mudah untuk menetapkan warna latar belakang setiap item untuk membezakan lajur kiri dan kanan. Anda boleh menambah gaya tambahan untuk mencantikkan susun atur anda mengikut keperluan anda.

Ringkasan

Dengan menggunakan susun atur elastik CSS Flex, kami boleh melaksanakan susun atur dua lajur dengan mudah. Hanya tetapkan sifat paparan bekas Flex kepada "flex", kemudian tetapkan sifat arah flex kepada "baris", dan kemudian tetapkan sifat flex item Flex kepada nilai yang sepadan untuk mencapai susun atur yang fleksibel dan adaptif. Di atas adalah contoh mudah, anda boleh menyesuaikan kod mengikut keperluan dan reka bentuk anda. Saya harap artikel ini akan membantu anda memahami dan menggunakan susun atur elastik CSS Flex!

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!