Bagaimana untuk Membuat Isian Baris Flexbox Baki Ruang Menegak?

Mencapai 100% Penggunaan Ruang Menegak dalam Reka Letak Flexbox

Flexbox ialah sistem susun atur berkuasa yang membolehkan pembangun mencipta reka letak responsif dan dinamik. Satu senario biasa ialah mempunyai baris susun atur flexbox yang secara automatik menggunakan baki ruang menegak dalam tetingkap penyemak imbas. Artikel ini meneroka cara untuk mencapai ini menggunakan sifat Flexbox.

Cabaran:

Pertimbangkan reka letak kotak flex tiga baris dengan dua baris pertama mempunyai ketinggian tetap. Cabarannya ialah untuk menjadikan baris ketiga berkembang secara menegak untuk mengisi ruang yang tinggal pada tetingkap penyemak imbas, membolehkan kandungannya berkembang dengan sewajarnya.

Penyelesaian:

Kuncinya untuk mencapai tingkah laku ini ialah menetapkan sifat "flex" baris ketiga kepada nilai yang lebih besar daripada 1. Ini mengarahkan kotak flex untuk mengembangkan baris melebihi saiz intrinsiknya dan mengagihkan ruang yang tinggal di kalangan anak-anaknya. Walau bagaimanapun, menetapkan atribut ketinggian kepada 100% tidak akan berfungsi kerana kandungan dalam baris tidak secara semula jadi memenuhi tetingkap penyemak imbas.

Melaksanakan Penyelesaian:

Untuk melaksanakan reka letak ini dengan betul, pastikan prinsip berikut digunakan:

• Tetapkan ketinggian html, badan dan div induk (pembungkus) kepada 100%. Warisan ini membenarkan baris ketiga mewarisi ketinggian penuh tetingkap penyemak imbas.
• Tetapkan sifat lentur baris ketiga kepada nilai yang lebih besar daripada 1 (mis., lentur: 2). Ini memaksa baris berkembang secara menegak dan menggunakan ruang yang tinggal.
• Pertimbangkan untuk menambah ketinggian min 100% pada lajur dalam baris ketiga. Walaupun tidak diperlukan dalam kebanyakan penyemak imbas moden, ia boleh memberikan keserasian merentas penyemak imbas.

Kod Contoh:

.wrapper, html, body {
    height: 100%;
    margin: 0;
}

.wrapper {
    display: flex;
    flex-direction: column;
}

#row1 {
    background-color: red;
}

#row2 {
    background-color: blue;
}

#row3 {
    background-color: green;
    flex: 2;
    display: flex;
}

#col1 {
    background-color: yellow;
    flex: 0 0 240px;
    min-height: 100%;
}

#col2 {
    background-color: orange;
    flex: 1 1;
    min-height: 100%;
}

#col3 {
    background-color: purple;
    flex: 0 0 240px;
    min-height: 100%;
}

Kesimpulan:

Dengan mengikuti garis panduan ini, anda boleh membuat susun atur kotak flex dengan mudah yang menggunakan ruang menegak yang tinggal secara automatik dalam tetingkap pelayar. Teknik ini amat berguna untuk reka bentuk responsif di mana ketinggian kandungan mungkin berbeza dengan ketara.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Isian Baris Flexbox Baki Ruang Menegak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!