Menguasai Flexbox: Nota Kajian Saya tentang Membina Reka Letak Responsif

Baiklah, ambil kopi (atau teh, kami tidak menilai) dan mari kita selami dunia Flexbox ! Jika anda pernah kecewa dengan cuba menjadikan halaman web kelihatan bagus pada mana-mana peranti — jangan risau, anda tidak bersendirian. Flexbox berada di sini untuk menyelamatkan hari ini, dan percayalah, ia tidak semenakutkan seperti yang didengari!

Apakah Flexbox di Bumi?

Flexbox adalah seperti pembantu susun atur peribadi anda, menyusun item anda secara ajaib dengan mudah. Ketahui cara menyediakan bekas fleksibel dan mengatur kandungan anda tanpa perlu berpeluh.

Model reka letak yang berkuasa dan cekap dalam CSS ini membolehkan anda menyusun dan menjajarkan elemen secara responsif dan fleksibel dalam bekas. Ia menjadikan penjajaran dan pengagihan ruang antara item menjadi mudah, tanpa memerlukan pengiraan yang rumit atau tweak kedudukan. Flexbox dibina untuk mengendalikan reka letak satu dimensi (sama ada baris atau lajur) dengan cara yang paling mudah.

Mari kita menyelami contoh praktikal dan petua untuk mengelakkan kesilapan biasa, supaya reka bentuk anda kekal lancar — seperti kopi pagi anda.

Untuk lebih memahami Flexbox, mari bahagikannya kepada dua bahagian utama:

Hartanah untuk Bekas Flex (Bekas Induk):

• arah lentur
• balut lentur
• aliran lentur
• mewajarkan-kandungan
• selaraskan-item
• selaraskan-kandungan

Perkara pertama dahulu, kita perlu menetapkan 'display: flex' dalam bekas induk. Ini mengaktifkan Flexbox dan membenarkan semua sifat digunakan pada bekas dan itemnya.

display:flex

arah lentur

flex-direction: 
row | row-reverse | column | column-reverse

Mentakrifkan arah utama item dalam bekas. Jika anda tidak menentukan arah, lalai akan digunakan:

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

flex-wrap
nowrap | wrap | wrap-reverse

Mengawal sama ada item harus dipecahkan kepada berbilang baris/lajur:

• nowrap (lalai): Item kekal pada satu baris/lajur.
• balut: Item dibalut pada baris/lajur baharu apabila ia tidak muat.
• balut-terbalik: Item dibalut secara terbalik.

aliran lentur

flex-flow

Singkatan untuk sifat flex-direction dan flex-wrap, yang bersama-sama mentakrifkan paksi utama dan paksi silang. Lalai: row nowrap.

justify-content

justify-content
flex-star | flex-end | space-between | space-around | space-evenly

Menjajarkan item di sepanjang paksi utama (arah ditetapkan mengikut arah lentur):

• flex-start: Item dijajarkan pada permulaan bekas.
• hujung lentur: Item dijajar di hujung bekas.
• tengah: Item dijajarkan di tengah.
• ruang-antara: Item dijarakkan sama rata, dengan ruang tambahan di antaranya.
• ruang sekeliling: Item mempunyai ruang yang sama di sekelilingnya.
• ruang-sama rata: Item mempunyai ruang yang sama antara dan di sekelilingnya.

align-item

display:flex

Menjajarkan item pada paksi silang (berserenjang dengan paksi utama):

• regangan (lalai): Item diregangkan untuk mengisi bekas.
• flex-start: Item dijajarkan pada permulaan paksi silang.
• hujung lentur: Item dijajarkan di hujung paksi silang.
• tengah: Item dijajarkan di tengah.
• garis dasar: Item sejajar dengan garis dasar kandungannya.

align-content

flex-direction: 
row | row-reverse | column | column-reverse

Menjajarkan baris bekas apabila terdapat berbilang baris item fleksibel:

• Pilihan serupa seperti item jajar, tetapi digunakan pada berbilang baris.

Selain itu, walaupun tidak eksklusif untuk Flexbox, gap selalunya berguna di sini untuk menggayakan reka letak Flexbox:

flex-wrap
nowrap | wrap | wrap-reverse

Sifat yang boleh kita gunakan pada item fleksibel (bekas kanak-kanak):

• pesanan
• flex-grow
• flex-mengecut
• asas lentur
• fleksikan
• selaraskan diri

pesanan

flex-flow

Mengawal susunan visual item fleksibel. Lalai untuk semua item ialah 0, tetapi anda boleh menetapkan nombor yang lebih tinggi atau lebih rendah untuk menukar susunan.

flex-grow

justify-content
flex-star | flex-end | space-between | space-around | space-evenly

Mentakrifkan jumlah ruang yang perlu diambil oleh item jika terdapat ruang tambahan. Jika semua item mempunyai flex-grow: 1, mereka akan berkongsi ruang tambahan secara sama rata.

lentur-mengecut

align-items 
stretch | flex-start | flex-end | center | baseline

Mentakrifkan berapa banyak item harus mengecut apabila ruang sempit. Lalai ialah 1 (item boleh mengecut); 0 menghalang pengecutan.

asas lentur

align-content

Menetapkan saiz awal item sebelum ruang diedarkan. Ia boleh dalam piksel, peratusan atau auto.

lentur

gap: 10px 20px /*or*/
row-gap: 10px
colunm-gap: 20px

Kata ringkas untuk menetapkan flex-grow, flex-shrink, dan flex-basis sekaligus. Contohnya, lentur: 1 1 200px; bermakna item boleh membesar dan mengecut dengan saiz asas 200px.

align-self

e.g., order: 2

Membenarkan item individu dijajarkan secara berbeza daripada yang lain (mengatasi item penjajaran). Secara lalai, ia menggunakan nilai item penjajaran bekas.

Kod ini menyediakan titik permulaan yang sempurna untuk meneroka sifat Flexbox dalam tindakan dan bereksperimen dengan penggayaan CSS.

<!DOCTYPE html>
<html lang="en">
<kepala>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Flexbox</title>
  <pautan rel="stylesheet" href="styles.css">
</head>
<badan>
  <div>



<p>Sementara kami mengakhiri pengembaraan Flexbox kami, mari bercakap tentang sedikit <em>kelas sihir CSS—kelas palsu</em>. Alat berguna ini membolehkan anda menggayakan elemen berdasarkan <strong>kedudukan, keadaan atau interaksi</strong>, menjadikan reka letak Flexbox anda lebih dinamik dan interaktif. Sama ada anda menggunakan :nth-child() untuk gaya ganti, :hover untuk mencipta animasi halus atau :first-child untuk membuat satu item pop, kelas pseudo memberi anda kuasa untuk menambah sentuhan unik tanpa HTML tambahan.</p>

<p>Bersedia untuk terus meningkatkan kemahiran anda? Saya pasti! Berpegang teguh, kerana siaran seterusnya saya akan menyelami lebih mendalam teknik CSS untuk menghidupkan reka letak kami. Saya juga di sini untuk belajar dan berkembang, jadi jika anda mempunyai petua, maklum balas atau pembetulan, jangan teragak-agak untuk meninggalkan ulasan. Mari kita terus membina bersama-sama!</p>


          

            
        

Atas ialah kandungan terperinci Menguasai Flexbox: Nota Kajian Saya tentang Membina Reka Letak Responsif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!