Flexbox – Cara Moden untuk Menjajarkan dan Mengagihkan Ruang

Kuliah 14: 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.

1. Apakah itu Flexbox?

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.

2. Keajaiban Bermula dengan paparan: flex

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.

3. Arah Fleksibel – Ke Mana Harus Kita Pergi?

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.

• baris: Jajarkan item dalam baris mendatar (ini ialah lalai).
• lajur: Tindanan item dalam lajur menegak.
• baris-balik: Sama seperti baris, tetapi susunan item diterbalikkan.
• lajur-terbalik: Sama seperti lajur, tetapi item disusun dalam susunan terbalik.

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

Kini, item akan disusun secara menegak!

4. Mewajarkan Kandungan – Menyebarkan Perkara

Katakanlah anda mempunyai tiga item dan anda mahu meratakannya dalam bekas anda. Di sinilah justify-content berguna.

• flex-start: Item sejajar dengan permulaan bekas (lalai).
• pusat: Item ditengah.
• ruang-antara: Item dijarakkan sama rata, dengan item pertama di permulaan dan item terakhir di penghujung.
• ruang-sekitar: Item dijarakkan dengan padding yang sama di sekeliling setiap item.

.flex-container {
    display: flex;
    justify-content: space-between;
}

Kini, item akan dijarakkan sama rata dalam bekas.

5. Menjajarkan Item – Sihir Menegak

Semasa justify-content mengawal penjajaran mendatar, align-item menjaga penjajaran menegak (atau sepanjang paksi silang). Berikut ialah pilihan anda:

• regangkan: Item diregangkan untuk mengisi bekas (lalai).
• flex-start: Item dijajarkan ke atas.
• flex-end: Item dijajarkan ke bahagian bawah.
• tengah: Item berpusat menegak.

.flex-container {
    display: flex;
    align-items: center;
}

Kini, semua item akan dipusatkan secara menegak di dalam bekas.

6. Flex-Grow, Flex-Shrink dan Flex-Basis – Memperhalus Item Flex

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:

• flex-grow: Mengawal berapa banyak item harus berkembang berbanding item lain.
• flex-shrink: Mengawal berapa banyak item harus mengecut berbanding item lain.
• asas lentur: Menetapkan saiz awal item sebelum ia membesar atau mengecut.

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.

7. Contoh Flexbox dalam Tindakan

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:

• Item disusun dalam satu baris.
• Ia dijarakkan sama rata dengan justify-content: space-round.
• Semua item dipusatkan secara menegak dalam bekas dengan item jajar: tengah.
• Setiap item berkembang untuk mengisi ruang yang tersedia secara sama rata, terima kasih kepada flex-grow: 1.

8. Mengapa Flexbox Bergegar

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!

Ambilan Utama:

• Gunakan paparan: lentur untuk menukar bekas menjadi bekas lentur.
• Gunakan arah lentur untuk menetapkan arah aliran (baris atau lajur).
• Gunakan justify-content dan align-item untuk mengawal jarak dan penjajaran.
• Tala halus item flex anda dengan flex-grow, flex-shrink dan flex-basis.

ikuti saya di LinkedIn-

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!