Tutorial susun atur CSS3 Flexbox: Bagaimana untuk menyusun elemen secara fleksibel?

Tutorial Layout CSS3 Flexbox: Bagaimana untuk menyusun elemen secara fleksibel?

Petikan:
Dalam reka bentuk web, reka letak adalah bahagian yang penting. Alat susun atur yang berkuasa ialah susun atur Flexbox dalam CSS3. Reka letak Flexbox menyediakan cara yang mudah dan fleksibel untuk mengendalikan dan mengatur elemen dalam halaman web. Artikel ini akan memperkenalkan prinsip asas dan penggunaan reka letak Flexbox, serta menyertakan beberapa contoh kod untuk membantu pembaca memahami dan menggunakan reka letak Flexbox dengan lebih baik.

1. Prinsip asas susun atur Flexbox:
Susun atur Flexbox ialah model kotak fleksibel yang mencapai reka letak adaptif dan fleksibel dengan mentakrifkan sifat bekas dan elemen dalam bekas. Menggunakan susun atur Flexbox, kami boleh menjajarkan, mengedar dan menyusun elemen secara mendatar dan menegak dengan mudah.

Konsep teras susun atur Flexbox termasuk: Bekas, Paksi Utama dan Paksi Silang. Bekas ialah elemen yang sifat paparannya ditetapkan kepada flex atau inline-flex. Paksi utama ialah arah mendatar dalam susun atur Flexbox, dan paksi silang ialah arah menegak dalam susun atur Flexbox.

2. Atribut asas reka letak Flexbox:
1. Atribut bekas:
(1) paparan: Tentukan bekas sebagai susun atur fleksibel atau susun atur sebaris.
(2) arah lentur: Tentukan arah paksi utama (baris, baris-terbalik, lajur, lajur-terbalik).
(3) flex-wrap: Tentukan sama ada untuk membenarkan elemen membalut (nowrap, wrap, wrap-reverse).
(4) justify-content: Tentukan penjajaran elemen pada paksi utama (flex-start, flex-end, tengah, ruang-antara, ruang-keliling).
(5) align-item: Tentukan penjajaran elemen pada paksi silang (flex-start, flex-end, center, baseline, stretch).

2. Atribut elemen:
(1) flex: Menentukan nisbah pengembangan elemen, yang menentukan perkadaran elemen dalam ruang yang tinggal.
(2) align-self: Tentukan penjajaran elemen pada paksi silang (flex-start, flex-end, center, baseline, stretch).

3. Contoh kod reka letak Flexbox:
Berikut ialah beberapa contoh kod contoh reka letak Flexbox klasik untuk membantu pembaca memahami dan menggunakan reka letak Flexbox dengan lebih baik.
(Nota: Kod berikut hendaklah diletakkan dalam teg