CSS Academy · Pelajaran

Flex Grow, Shrink dan Basis

Kawal cara item flex membesar dan mengecil, serta tetapkan saiz asasnya menggunakan bentuk ringkas flex.

Pelajaran 4 daripada 413 langkah

Flex Grow, Shrink dan Basis ialah pelajaran CSS Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.

Singkatan flex

Singkatan flex pada item flex menetapkan tiga nilai: flex-grow, flex-shrink, dan flex-basis.

<div style="display:flex; gap:8px">
    <div class="item">flex: 1 1 auto</div>
    <div style="width:80px">Fixed 80px</div>
  </div>

flex-basis

flex-basis menetapkan saiz awal item flex sebelum item membesar atau mengecil. Sifat ini mengatasi lebar (dalam arah baris). auto menggunakan lebar atau saiz kandungan item.

<div style="display:flex; gap:8px">
    <div class="sidebar">Sidebar (250px basis)</div>
    <div class="main">Main (auto basis)</div>
  </div>

flex-grow

flex-grow menentukan sejauh mana item membesar berbanding adik-beradiknya apabila ruang kosong tersedia. Nilai 0 bermaksud tiada pembesaran. Nilai yang lebih tinggi menerima lebih banyak ruang secara berkadaran.

<div style="display:flex; gap:8px">
    <div class="main">Main (grow:2)</div>
    <div class="aside">Aside (grow:1)</div>
    <div class="fixed">Fixed (grow:0)</div>
  </div>

Contoh flex-grow

Jika bekas mempunyai 300px ruang kosong dan dua item dengan flex-grow 1 dan 2: item pertama mendapat tambahan 100px, manakala item kedua mendapat tambahan 200px (nisbah 1:2).

flex-shrink

flex-shrink mengawal sejauh mana item mengecil apabila ruang tidak mencukupi. Lalainya ialah 1 (semua item mengecil sama rata). Nilai 0 menghalang pengecilan.

<div style="display:flex; gap:8px">
    <div class="logo">Logo</div>
    <div class="search">Search input takes remaining space</div>
  </div>

Nilai Singkatan flex yang Lazim

Hafalkan corak lazim ini:

flex: 1 = membesar dan mengecil sama rata, asas 0%
flex: auto = flex: 1 1 auto
flex: none = flex: 0 0 auto (tegar)
flex: 0 0 200px = 200px tetap, tiada pembesaran atau pengecilan

flex: 1 — Pengagihan Sama Rata

Menetapkan flex: 1 pada semua anak membahagikan ruang yang tersedia secara sama rata. Asasnya menjadi 0%, jadi item membesar bermula daripada kosong dan membahagikan ruang secara berkadaran.

<div class="equal-columns" style="display:flex; gap:8px">
    <div class="col">Column A</div>
    <div class="col">Column B</div>
    <div class="col">Column C</div>
  </div>

flex-basis berbanding width

flex-basis mempunyai keutamaan berbanding width dalam arah paksi utama. Jika anda menetapkan kedua-duanya, flex-basis diutamakan (kecuali jika flex-basis ialah auto, yang kemudiannya menggunakan width).

Penentuan Saiz Intrinsik berbanding Ekstrinsik

Apabila flex-basis: 0 (seperti dalam flex: 1), item bermula daripada 0 dan membesar secara berkadaran — pengagihan berkadaran sebenar. Dengan flex-basis: auto, item bermula daripada saiz kandungan semula jadinya kemudian membesar.

Corak Tiga Serangkai

Susun atur klasik dengan bar sisi tetap + bahagian utama fleksibel + bar sisi tetap:

<div class="layout">
    <div class="left-sidebar">Left</div>
    <div class="main-content">Main</div>
    <div class="right-sidebar">Right</div>
  </div>

min-width dan max-width dengan flex

Gunakan min-width dan max-width bersama flex-grow untuk mengawal had pembesaran:

<div style="display:flex; gap:8px">
    <div class="card">Responsive Card</div>
  </div>

Semakan Ringkas

Satu item mempunyai flex: 0 0 200px. Apakah maksudnya?

Jawab dalam pelajaran interaktif

Ringkasan

flex-grow mengagihkan ruang tambahan secara berkadaran. flex-shrink mengawal cara item dimampatkan. flex-basis menetapkan saiz permulaan. Singkatan flex: 1 membolehkan pengagihan ruang yang sama rata. Gunakan flex: 0 0 Xpx untuk item bersaiz tetap dan flex: 1 untuk item fleksibel dalam bekas yang sama.

Percuma untuk bermula

Pelajari CSS dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 40
Pelajaran: 159

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Flex Grow, Shrink dan Basis” percuma?

Ya — teks penuh “Flex Grow, Shrink dan Basis” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Flex Grow, Shrink dan Basis”?

Kawal cara item flex membesar dan mengecil, serta tetapkan saiz asasnya menggunakan bentuk ringkas flex. Anda berlatih CSS Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan CSS Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran CSS Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.

Berapa lamakah pelajaran “Flex Grow, Shrink dan Basis” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke CSS Academy