Rumah >hujung hadapan web >tutorial css >Flexbox – Cara Moden untuk Menjajarkan dan Mengagihkan Ruang
Hei! Bersedia untuk menyelami salah satu alat yang paling hebat dan paling berkuasa dalam CSS? Hari ini, kita akan meneroka Flexbox. Jika anda pernah bergelut dengan menjajarkan item atau mengagihkan ruang dengan cara yang kemas dan responsif, Flexbox ialah rakan baik baharu anda.
Flexbox (Reka Letak Kotak Fleksibel) ialah sistem susun atur satu dimensi yang membolehkan anda mengawal penjajaran, jarak dan pengedaran elemen di dalam bekas—walaupun saiz elemen tersebut tidak diketahui atau dinamik.
Fikirkan Flexbox sebagai kotak alat untuk membuat reka letak yang boleh meregang, mengecut atau menjajarkan bergantung pada ruang yang ada.
Untuk mula menggunakan Flexbox, anda hanya perlu menetapkan paparan: flex pada bekas. Sebaik sahaja anda berbuat demikian, semua anak langsung bekas itu menjadi item fleksibel dan mereka akan mula berkelakuan berbeza dengan serta-merta.
<div class="flex-container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div>
.flex-container { display: flex; }
Kini, semua item di dalam .flex-container adalah item fleksibel dan boleh dimanipulasi dengan mudah.
Secara lalai, Flexbox menyusun item dalam satu baris (mendatar), tetapi bagaimana jika anda mahu item itu dalam lajur (menegak)? Flexbox memberi anda kawalan penuh dengan sifat arah-flex.
.flex-container { display: flex; flex-direction: column; }
Kini, item akan disusun secara menegak!
Katakanlah anda mempunyai tiga item dan anda mahu meratakannya dalam bekas anda. Di sinilah justify-content berguna.
.flex-container { display: flex; justify-content: space-between; }
Kini, item akan dijarakkan sama rata dalam bekas.
Semasa justify-content mengawal penjajaran mendatar, align-item menjaga penjajaran menegak (atau sepanjang paksi silang). Berikut ialah pilihan anda:
.flex-container { display: flex; align-items: center; }
Kini, semua item akan dipusatkan secara menegak di dalam bekas.
Kadangkala, anda mahu item tertentu membesar, mengecut atau mempunyai saiz permulaan yang tetap. Sifat flex-grow, flex-shrink dan flex-basis membolehkan anda mengawal tingkah laku itu:
Contoh:
.item { flex-grow: 1; flex-shrink: 0; flex-basis: 100px; }
Ini memastikan bahawa item bermula pada 100px, tetapi ia boleh berkembang untuk mengisi ruang tambahan jika diperlukan, tanpa mengecut.
Mari kita letakkan semua ini dengan contoh!
<div class="flex-container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div>
.flex-container { display: flex; flex-direction: row; justify-content: space-around; align-items: center; height: 300px; background-color: #f0f0f0; } .item { background-color: #4CAF50; padding: 20px; color: white; flex-grow: 1; }
Dalam contoh ini:
Flexbox menghilangkan banyak kerumitan reka bentuk reka letak yang biasa kami hadapi dalam CSS. Tiada lagi terapung, tiada lagi bimbang tentang pembersihan, dan reka bentuk responsif yang lebih mudah!
Ridoy Hasan
Atas ialah kandungan terperinci Flexbox – Cara Moden untuk Menjajarkan dan Mengagihkan Ruang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!