Rumah > Artikel > hujung hadapan web > Bagaimana untuk mencapai bar sisi kiri dan kanan adaptif melalui susun atur CSS Flex
Bagaimana untuk mencapai bar sisi kiri dan kanan adaptif melalui susun atur CSS Flex
- WBOYasal
- 2023-09-26 10:57:021511semak imbas
Cara mencapai bar sisi kiri dan kanan adaptif melalui susun atur elastik CSS Flex
Pengenalan: Dengan pembangunan berterusan reka bentuk web, merealisasikan susun atur halaman yang adaptif telah menjadi keperluan penting. Reka letak CSS Flex ialah cara yang baik untuk menyelesaikan masalah ini. Artikel ini akan memperkenalkan cara melaksanakan susun atur penyesuaian bar sisi kiri dan kanan melalui susun atur elastik CSS Flex, dan memberikan contoh kod terperinci.
1. Pengenalan kepada Reka Letak Fleksibel
1.1 Bekas Fleksibel dan Item Fleksibel
Susun atur fleksibel melaksanakan reka letak dengan menetapkan sub-elemen dalam bekas sebagai item fleksibel. Elemen induk dipanggil bekas lentur dan elemen anak dipanggil item lentur. Dalam bekas yang fleksibel, kita boleh mengawal susunan elemen kanak-kanak dan ruang yang didudukinya dengan menetapkan beberapa sifat.
1.2 Sifat bekas fleksibel
- paparan: flex: Tetapkan bekas sebagai bekas fleksibel
- arah-flex: Tetapkan susunan item fleksibel, yang boleh ditetapkan kepada baris (arah mendatar) atau lajur (arah menegak; );
- justify-content: Tetapkan penjajaran item fleksibel pada paksi utama, yang boleh ditetapkan kepada flex-start (titik permulaan berhampiran kiri atau atas), flex-end (titik akhir berhampiran kanan atau bawah), tengah (penjajaran tengah), ruang-antara ( Jajarkan kedua-dua hujung, jarak antara item adalah sama), ruang-keliling (jarak pada kedua-dua belah item adalah sama, jarak antara item adalah separuh daripada yang asal );
- align-item: Tetapkan penjajaran item fleksibel pada paksi silang, anda boleh menetapkan Untuk mula-flex (titik permulaan adalah berhampiran bahagian atas atau kiri), flex-end (titik akhir adalah berhampiran bahagian bawah atau kanan), tengah (penjajaran tengah), regangan (regangkan untuk mengisi keseluruhan paksi silang), penjajaran garis dasar (garis dasar baris pertama teks item).
1 nilai khusus boleh menjadi Integer (seperti 1) atau perpuluhan (seperti 1.5); daripada item;
- align-self: Tetapkan item fleksibel Penjajaran dirinya pada paksi silang.
- 2. Contoh reka letak penyesuaian bar sisi kiri dan kanan Mari gunakan contoh khusus untuk menunjukkan cara melaksanakan reka letak penyesuaian bar sisi kiri dan kanan melalui susun atur elastik CSS Flex.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>左右侧边栏自适应布局示例</title> <style> body { margin: 0; padding: 0; } .container { display: flex; flex-direction: row; } .sidebar { background-color: #f1f1f1; width: 20%; flex-grow: 1; } .content { background-color: #eee; width: 80%; flex-grow: 3; } .sidebar, .content { padding: 20px; } </style> </head> <body> <div class="container"> <div class="sidebar"> <h2>左侧边栏</h2> <p>左侧边栏内容</p> </div> <div class="content"> <h1>主要内容区域</h1> <p>主要内容</p> </div> </div> </body> </html>Kod di atas ialah contoh susun atur bar sisi kiri dan kanan yang mudah. Kami menyusun elemen anak dalam arah mendatar dengan menetapkan
display: flex; dan flex-direction: row; bekas. lebar: 80%; kawasan kandungan kanan mengawal perkadaran kedua-duanya dalam arah mendatar, yang ialah, sebelah kiri Lajur mengambil 20% daripada lebar dan kawasan kandungan mengambil 80% daripada lebar.
flex-grow: 1; pada bar sisi kiri dan flex-grow: 3; pada kawasan kandungan kanan, kami menyedari pelarasan automatik kiri dan bar sisi kanan. Ini bermakna bar sisi kiri akan menggunakan 1/4 daripada ruang yang tersedia dan kawasan kandungan yang betul akan mengambil 3/4 daripada ruang yang tersedia. display: flex; 和 flex-direction: row; 使得子元素在水平方向上排列。
左侧边栏的 width: 20%; 和右侧内容区域的 width: 80%; 控制了两者在水平方向上的占比，即左边栏占 20% 宽度，内容区域占 80% 宽度。
通过设置左侧边栏的 flex-grow: 1; 和右侧内容区域的 flex-grow: 3;Kesimpulan:
Atas ialah kandungan terperinci Bagaimana untuk mencapai bar sisi kiri dan kanan adaptif melalui susun atur CSS Flex. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!