Ketahui susun atur fleksibel CSS3, bagaimana untuk membuat susun atur halaman web yang fleksibel?

Ketahui susun atur fleksibel CSS3, bagaimana untuk membuat reka letak halaman web yang fleksibel?

Dalam reka bentuk web, reka letak memainkan peranan penting. Dengan reka letak yang baik, halaman web anda boleh kelihatan lebih kemas, lebih cantik dan menyesuaikan diri dengan saiz skrin dan peranti yang berbeza. Reka letak fleksibel CSS3 menyediakan cara yang fleksibel dan berkuasa untuk mencipta reka letak halaman web. Artikel ini akan memperkenalkan apa itu reka letak fleksibel dan cara menggunakannya untuk membuat reka letak halaman web yang fleksibel.

1. Apakah reka letak fleksibel? ialah kaedah reka letak baharu yang disediakan dalam CSS3, juga dikenali sebagai reka letak fleksibel. Ia berdasarkan konsep paksi utama dan paksi silang, dan mencapai kesan susun atur yang fleksibel dengan menetapkan satu siri sifat untuk bekas dan elemen dalamannya. Melalui susun atur fleksibel, kami boleh mencapai kesan seperti elemen penyesuaian, penjajaran tengah dan juga pengedaran ruang dengan mudah.

2. Bekas Flex dan item flex

Dalam susun atur fleksibel, terdapat dua konsep penting iaitu bekas flex dan item flex. Bekas fleksibel ialah elemen induk yang mengandungi sekumpulan item fleksibel. Sifat dan nilai elemen induk ini menentukan bagaimana elemen anak diletakkan. Item fleksibel ialah elemen kanak-kanak yang terkandung secara langsung oleh bekas flex.

3. Atribut bekas flex

paparan: flex
1. Ini adalah langkah pertama untuk menggunakan susun atur fleksibel. Ia akan menyusun elemen di dalam bekas pada satu baris, dan secara lalai elemen akan diisih mengikut susunan ia muncul dalam HTML.
   
flex-direction
2. Harta ini menentukan cara elemen disusun dalam bekas. Ia mempunyai nilai pilihan berikut:
   
baris: Arah mendatar, disusun dari kiri ke kanan (nilai lalai)
3. baris-terbalik: Arah mendatar, disusun dari kanan ke kiri
4. lajur: Arah menegak, atas ke bawah Susunan
5. lajur-terbalik: Arah menegak, disusun dari bawah ke atas
6. justify-content
7. Atribut ini menentukan penjajaran elemen pada paksi utama. Ia mempunyai nilai pilihan berikut:
   
flex-start: jajar dekat dengan kedudukan mula paksi utama (nilai lalai)
8. flex-end: jajar dekat dengan kedudukan akhir paksi utama
9. pusat: jajar dalam tengah
10. ruang-antara: bahagikan ruang paksi utama sama rata pada, elemen pertama dan terakhir berdekatan dengan kedua-dua belah bekas
11. ruang-keliling: bahagikan ruang pada paksi utama secara sama rata, jarak antara setiap elemen dan antara elemen pertama dan terakhir dan bekas adalah sama
12. align-item
13. Atribut ini menentukan persilangan elemen Penjajaran pada paksi. Ia mempunyai nilai pilihan berikut:
    
flex-start: sejajar dekat dengan kedudukan mula paksi silang
14. flex-end: sejajar dekat dengan kedudukan akhir paksi silang
15. pusat: sejajar di tengah
16. garis dasar : dijajarkan mengikut garis dasar elemen
regangan: Regangkan elemen untuk mengisi ruang paksi silang

4. Sifat item fleksibel

flex-grow
1. Harta ini menentukan nisbah pengembangan item fleksibel dalam ruang yang tinggal. Jika bekas induk mempunyai ruang tambahan, nilai sifat flex-grow bagi setiap item flex akan menentukan perkadaran ia diperuntukkan. Nilai lalai ialah 0, yang bermaksud tiada penskalaan.
   
flex-shrink
2. Harta ini menentukan nisbah pengecutan item fleksibel apabila ruang tidak mencukupi. Jika bekas induk tidak mempunyai ruang yang mencukupi untuk memuatkan semua item, nilai sifat flex-shrink setiap item flex akan menentukan bahagian yang mengecut. Nilai lalai ialah 1, yang bermaksud pengecutan berkadar yang sama.
   
flex-basis
3. Harta ini menentukan saiz awal item fleksibel dalam arah paksi utama. Ia boleh ditetapkan kepada nilai tertentu (seperti piksel) atau peratusan. Nilai lalai ialah auto, yang memperuntukkan saiz secara automatik berdasarkan kandungan projek.
   
align-self
4. Harta ini menentukan penjajaran item individu pada paksi silang. Ia boleh mengatasi sifat item penjajaran kontena. Nilai pilihannya adalah sama dengan item align.
   

5. Contoh susun atur halaman web yang fleksibel

Berikut ialah contoh susun atur halaman web yang dibuat menggunakan susun atur fleksibel:

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .header {
            width: 100%;
            height: 100px;
            background-color: #ccc;
        }

        .main {
            flex: 1;
            width: 100%;
            background-color: #eaeaea;
        }

        .sidebar {
            width: 200px;
            background-color: #ccc;
        }

        .content {
            flex-grow: 1;
            padding: 20px;
        }

        .footer {
            width: 100%;
            height: 50px;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">Header</div>
        <div class="main">
            <div class="sidebar">Sidebar</div>
            <div class="content">Content</div>
        </div>
        <div class="footer">Footer</div>
    </div>
</body>
</html>

Menggunakan kod di atas, anda boleh mencapai reka letak halaman web yang fleksibel, di mana bahagian kepala dan bahagian bawah telah ditetapkan ketinggian, dan bahagian tengah dibahagikan kepada sisi Bar sisi dan kawasan kandungan, bahagian tengah boleh dikembangkan secara fleksibel mengikut ketinggian kandungan. Dengan menetapkan atribut flex setiap elemen dan penjajaran bekas, anda boleh melaksanakan reka letak halaman web yang menyesuaikan dengan saiz skrin yang berbeza.

6. Ringkasan

Susun letak fleksibel CSS3 menyediakan cara yang fleksibel dan berkuasa untuk membuat reka letak halaman web. Dengan menggunakan pelbagai sifat bekas fleksibel dan item fleksibel secara fleksibel, anda boleh mencapai kesan seperti penyesuaian elemen, penjajaran tengah dan juga pengedaran ruang dengan mudah. Dengan mempelajari dan menguasai reka letak fleksibel, kami boleh membuat reka letak halaman web yang lebih fleksibel, cantik dan boleh disesuaikan dengan saiz dan peranti skrin yang berbeza.

Atas ialah kandungan terperinci Ketahui susun atur fleksibel CSS3, bagaimana untuk membuat susun atur halaman web yang fleksibel?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!