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.

•       
    
   
   
  左侧边栏
   
  左侧边栏内容
   
   
   
  主要内容区域
   
  主要内容
   
   
    

  Salin selepas log masuk
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: 20%; bar sisi kiri dan 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.

Dengan menetapkan 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:

Agak mudah untuk melaksanakan susun atur penyesuaian bar sisi kiri dan kanan melalui susun atur anjal Css Flex Kita hanya perlu menetapkan bekas induk kepada bekas fleksibel dan menggunakan sifat flex yang berkaitan untuk mengawal pengisihan. penjajaran dan pendudukan ruang bagi elemen kanak-kanak. Artikel ini memberikan contoh kod khusus untuk dibaca dan dipelajari oleh pembaca. Harap artikel ini membantu anda!

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!