CSS Flexbox Deep Dive

Kuliah 8: Menguasai CSS Flexbox - Menyelam Dalam

Dalam kuliah ini, kami akan menyelami lebih dalam ke dalam CSS Flexbox, alat reka letak yang berkuasa yang membantu anda mereka bentuk reka letak yang responsif dan fleksibel. Anda akan belajar cara menggunakan Flexbox untuk menjajarkan, mengedar dan memesan elemen dengan cekap, menjadikan reka bentuk anda lebih adaptif merentas peranti.

Apakah itu Flexbox?

Flexbox, singkatan untuk "Flexible Box Layout," ialah modul reka letak CSS yang memudahkan mereka bentuk reka letak yang boleh melaraskan kepada saiz skrin yang berbeza. Ia membolehkan susunan item dalam bekas menjadi fleksibel, menjajarkannya secara dinamik berdasarkan ruang yang ada.

1. Istilah Flexbox

Sebelum kita mula menggunakan Flexbox, mari kita fahami komponen utamanya:

• Bekas Flex: Elemen induk yang memegang item fleksibel.
• Item Fleksibel: Elemen kanak-kanak di dalam bekas fleksibel.

Anda mendayakan Flexbox dengan menetapkan paparan: flex pada bekas.

• Contoh:

  .flex-container {
    display: flex;
  }

Kini, elemen kanak-kanak di dalam .flex-container akan bertindak mengikut peraturan Flexbox.

2. Arah Fleksi

arah flex mengawal arah di mana item flex diletakkan di dalam bekas. Secara lalai, item diletakkan dalam satu baris.

• Nilai:

  • baris: Item disusun secara mendatar (lalai).
  • row-reverse: Item disusun secara mendatar tetapi dalam susunan terbalik.
  • lajur: Item disusun secara menegak.
  • lajur-terbalik: Item disusun secara menegak dalam susunan terbalik.

• Contoh:
  
  

  .flex-container {
    display: flex;
    flex-direction: row; /* You can change to column */
  }

3. Wajarkan Kandungan

kandungan justify digunakan untuk menjajarkan item lentur sepanjang paksi utama (mendatar jika arah lentur: baris; menegak jika arah lentur: lajur).

• Nilai:

  • flex-start: Menjajarkan item ke permulaan.
  • hujung lentur: Menjajarkan item ke hujung.
  • pusat: Item pusat.
  • ruang-antara: Menyebarkan item, dengan item pertama di permulaan dan yang terakhir di penghujung.
  • ruang sekeliling: Menambah ruang yang sama di sekeliling setiap item.

• Contoh:
  
  

  .flex-container {
    justify-content: center;
  }

Dalam contoh ini, item di dalam bekas flex akan ditengahkan.

4. Jajarkan Item

item sejajar menjajarkan item lentur sepanjang paksi silang (berserenjang dengan paksi utama).

• Nilai:

  • regangan: Regangkan item untuk mengisi bekas (lalai).
  • mula lentur: Menjajarkan item ke permulaan paksi silang.
  • hujung lentur: Menjajarkan item ke hujung paksi silang.
  • tengah: Memusatkan item di sepanjang paksi silang.

• Contoh:
  
  

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

5. Bungkus Fleksibel

Secara lalai, item flex diletakkan pada satu baris dan kandungan mungkin mengecut untuk dimuatkan. flex-wrap membenarkan item flex untuk membalut ke beberapa baris jika perlu.

• Nilai:

  • nowrap: Item kekal pada satu baris (lalai).
  • balut: Item balut pada berbilang baris.
  • wrap-reverse: Item membalut pada berbilang baris, tetapi dalam susunan terbalik.

• Contoh:
  
  

  .flex-container {
    flex-wrap: wrap;
  }

6. Jajarkan Kandungan

selaras-kandungan menjajarkan berbilang baris item lentur di sepanjang paksi silang. Ia digunakan apabila bekas mempunyai ruang tambahan dalam paksi silang dan terdapat berbilang baris item fleksibel.

• Nilai:

  • flex-start: Pek baris ke arah permulaan.
  • flex-end: Membungkus garisan ke arah penghujung.
  • tengah: Pek garisan ke arah tengah.
  • ruang-antara: Mengagihkan garis sama rata dengan ruang di antaranya.
  • ruang sekeliling: Mengagihkan garisan sama rata dengan ruang di sekelilingnya.
  • regangan: Regangan garisan untuk mengambil ruang yang ada.

• Contoh:
  
  

  .flex-container {
    align-content: space-between;
  }

Contoh Praktikal: Mencipta Galeri Foto Responsif

Mari buat galeri foto responsif menggunakan Flexbox.

HTML:

<div class="gallery">
  <div class="gallery-item">Image 1</div>
  <div class="gallery-item">Image 2</div>
  <div class="gallery-item">Image 3</div>
  <div class="gallery-item">Image 4</div>
  <div class="gallery-item">Image 5</div>
</div>

CSS:

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 10px;
  padding: 20px;
}

.gallery-item {
  flex-basis: calc(25% - 20px); /* Four items per row */
  background-color: #ddd;
  padding: 20px;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .gallery-item {
    flex-basis: calc(50% - 20px); /* Two items per row on smaller screens */
  }
}

Dalam contoh ini:

• The .gallery container uses Flexbox to wrap the items and spread them evenly.
• Each .gallery-item takes up 25% of the container width, minus the gap.
• On smaller screens (below 768px), the items adjust to 50% width for better readability.

Responsive Design with Flexbox

Flexbox is a powerful tool for responsive design. You can easily adjust the layout by changing flex properties based on the screen size using media queries.

• Example:

  @media screen and (max-width: 600px) {
    .gallery-item {
      flex-basis: 100%; /* Items take up full width on small screens */
    }
  }

With this media query, on screens smaller than 600px, each gallery item will take up the full width of the container.

Practice Exercises

1. Create a navigation bar using Flexbox, with the logo on the left and the links on the right.
2. Create a three-column layout that wraps into one column on smaller screens.
3. Use justify-content and align-items to create different layouts, like a centered section or a footer with evenly spaced links.

Next Up: In the next lecture, we’ll explore CSS Grid - A Deep Dive, where you’ll learn about CSS Grid and how it compares to Flexbox for building complex layouts. Stay tuned!

follow me on LinkedIn-

Ridoy Hasan

Atas ialah kandungan terperinci CSS Flexbox Deep Dive. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!