Bagaimanakah Saya Boleh Membuat Baris Flexbox Tertentu Dikembangkan untuk Mengisi Ruang Menegak Yang Selebihnya?

Mengimbangi Ruang Menegak dengan Flexbox

Flexbox menyediakan mekanisme yang berkuasa untuk mengatur kandungan dalam reka letak. Walau bagaimanapun, kadangkala sukar untuk mengawal penggunaan ruang menegak bagi baris tertentu dalam kotak lentur berbilang baris.

Sebagai contoh, jika anda mempunyai senario di mana anda mahu baris ketiga berkembang untuk menduduki baki yang tinggal. ruang menegak, berikut ialah cara anda boleh mencapai ini menggunakan flexbox:

Untuk bermula, pastikan bekas luar, biasanya elemen badan dan html, serta bekas flexbox induk (pembungkus), menetapkan ketinggiannya kepada 100%, dengan berkesan mewarisi ketinggian penuh tetingkap penyemak imbas.

Seterusnya, fokus pada baris ketiga (#row3) dalam reka letak flexbox anda . Tetapkan nilai lentur yang lebih besar daripada 1 pada baris ini sambil meninggalkan baris lain dengan nilai lentur 1 atau kurang. Ini akan memberi isyarat kepada penyemak imbas bahawa baris ketiga harus menggunakan lebih banyak ruang daripada yang lain.

Untuk memperhalusi lagi reka letak, anda boleh menetapkan sifat ketinggian min bagi lajur dalam (#col1, #col2, dan #col3) dalam baris ketiga hingga 100%. Ini memastikan bahawa mereka mewarisi ketinggian penuh bekas induk mereka (#row3) dan melaraskan ketinggian mereka dengan sewajarnya.

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%;
}

Dengan melaksanakan pelarasan ini , anda membolehkan baris ketiga melaraskan ketinggiannya secara dinamik, menggunakan baki ruang menegak yang tersedia dalam tetingkap penyemak imbas. Ini menyediakan reka letak yang diingini di mana baris ketiga mengembang untuk mengisi kekosongan dan memuatkan elemen secara menegak, seperti yang diperlukan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Baris Flexbox Tertentu Dikembangkan untuk Mengisi Ruang Menegak Yang Selebihnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!