Bagaimana untuk mencapai bar sisi kiri dan kanan adaptif melalui susun atur CSS Flex-tutorial css-php.cn

Bagaimana untuk mencapai bar sisi kiri dan kanan adaptif melalui susun atur CSS Flex

WBOY

Lepaskan： 2023-09-26 10:57:02

asal

1575 orang telah melayarinya

如何通过Css Flex 弹性布局实现左右侧边栏的自适应

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;

2. Contoh reka letak penyesuaian bar sisi kiri dan kanan

<!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>

Salin selepas log masuk

display: flex;

flex-direction: row;

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!