Langkau ke kandungan
WANCODE
EN

Flexbox Dipermudahkan

15 minitPemulaHTML · CSS · JS

Dalam pelajaran ini

  • Jadikan sesuatu bekas sebagai flex container dengan display: flex
  • Guna justify-content, align-items dan gap untuk meletak dan menjarakkan item
  • Tahu bila perlu guna flex-direction dan flex-wrap
  • Tengahkan elemen secara mendatar dan menegak

Idea utama

Flexbox menyusun anak-anak sesuatu elemen induk sepanjang satu garisan. Anda gayakan induk, dan anak-anaknya akan tersusun sendiri.

Elemen blok bertindan dari atas ke bawah. Itu okey untuk perenggan, tapi bar navigasi, deretan butang atau logo di sebelah menu perlukan elemen bersebelahan. Itulah tugas flexbox.

CSS
.nav-links {
  display: flex;   /* children now sit in a row */
  gap: 20px;       /* space between them */
}

Satu baris pada induk. Anak-anak <li> tak perlukan CSS langsung.

Dua paksi

Flex container ada paksi utama (arah item mengalir — satu baris, kiri ke kanan, secara default) dan paksi silang (bersudut tegak dengannya). Hampir setiap property flexbox berkaitan dengan salah satu daripada dua paksi ini:

justify-content
Meletakkan item sepanjang paksi utama: flex-start, center, flex-end, space-between, space-around, space-evenly.
align-items
Meletakkan item sepanjang paksi silang: stretch (default), flex-start, center, flex-end.
gap
Ruang di antara item — tak perlu lagi letak margin pada setiap anak.
flex-direction
row (default) atau column. Tukar kepada column akan menukar paksi: justify-content kini bekerja dari atas ke bawah.
flex-wrap
nowrap (default) memaksa semua item dalam satu baris. wrap membenarkan item turun ke baris seterusnya bila ruang tak cukup.
Cuba setiap property dan lihat item bergerak. Perhatikan bagaimana flex-direction: column mengubah apa yang dibuat oleh justify dan align.

Header klasik

Logo di kiri, pautan di kanan, semuanya sebaris di tengah. Tiga baris flexbox:

CSS
.site-header {
  display: flex;
  justify-content: space-between; /* push logo and nav to opposite ends */
  align-items: center;            /* line them up vertically */
}

Menengahkan apa sahaja

Dulu, menengahkan sesuatu secara menegak terkenal sangat susah dalam CSS. Dengan flexbox, cuma center pada kedua-dua paksi. Induk perlu ada ketinggian supaya kesan tengah menegak itu nampak.

CSS
.hero {
  display: flex;
  justify-content: center; /* horizontal (main axis) */
  align-items: center;     /* vertical (cross axis) */
  min-height: 320px;
}

Kesilapan paling biasa

display: flex diletakkan pada induk (bekas), bukan pada item yang anda mahu gerakkan. Kalau tiada apa berlaku, semak elemen mana yang anda gayakan.

Flexbox untuk satu arah pada satu masa — baris atau lajur. Untuk baris dan lajur serentak (seperti galeri kad), CSS Grid biasanya lebih mudah. Itu pelajaran seterusnya.

Tiga pautan navigasi bertindan atas bawah. Jadikan .nav-links sebagai flex container supaya ia duduk sebaris, dengan gap sekurang-kurangnya 12px di antara setiap satu.

Semakan

  • .nav-links ialah flex container
  • Ketiga-tiga pautan berada dalam baris yang sama
  • Ada jarak sekurang-kurangnya 12px antara pautan

Uji kefahaman

Q1

Anda mahu tiga butang di dalam <div class="actions"> duduk sebaris. Di mana display: flex diletakkan?

Q2

Sebuah bekas ada display: flex; flex-direction: column;. Property mana yang kini menjarakkan item dari atas ke bawah?

Q3

Sepuluh tag dalam baris flex terhimpit dan terkeluar pada telefon. Apa yang membolehkan ia turun ke baris kedua?

Apa yang anda pelajari

  • display: flex pada induk menyusun anak-anaknya dalam satu baris.
  • justify-content = paksi utama, align-items = paksi silang, gap = ruang antara item.
  • flex-direction: column menukar paksi; flex-wrap: wrap membenarkan item menggunakan lebih daripada satu baris.
  • Tengahkan apa sahaja: display: flex; justify-content: center; align-items: center;
Pratonton

Output konsol daripada kod anda akan dipaparkan di sini.

Langkah 1 daripada 3