Flex, Grid dan Kedudukan dalam CSS: Panduan CSS Tailwind Terbaik

Baiklah, wira hadapan ?‍♂️?‍♀️, kami akan mempelajari tutorial lengkap tentang CSS Flex, Grid dan Positioning—dengan Tailwind CSS twist ! Kami akan bercakap tentang sihir pemusatan, kegilaan kedudukan, reka letak responsif dan segala-galanya di antaranya. Oleh itu, bersedialah untuk mengembara melalui kawasan ajaib reka letak di mana anda akan memperoleh kuasa untuk menjinakkan sebarang reka letak, mengendalikan keanehan penyemak imbas dan bertenang apabila keadaan seolah-olah mempunyai fikiran tersendiri.

---

1. Flexbox (Flex) dan Kuasa Besarnya
Flexbox adalah seperti Jedi bagi reka letak satu dimensi (satu baris atau lajur pada satu masa). Ini memberi anda perlindungan untuk menjarakkan item secara sama rata, memusatkan perkara dan membuat reka letak responsif yang tidak kelihatan seperti huru-hara pada mudah alih.
Bermula: flex dan flex-col Perkara pertama dahulu—jadikan bekas anda sebagai "bekas fleksibel" dengan utiliti fleksibel Tailwind. Mahu barangan anda berturut-turut? Hanya lentur. Perlukan mereka dalam lajur? Tambah flex-col. Semudah itu.

<div>



<p>Mahukan item tersebut dalam lajur?<br>
</p>

<pre class="brush:php;toolbar:false"><div>



<h3>
  
  
  Sifat Flex Penting
</h3>

<div><table>
<thead>
<tr>
<th>Property</th>
<th>Tailwind Class</th>
<th>What it Does</th>
</tr>
</thead>
<tbody>
<tr>
<td>justify-content</td>
<td>justify-center, justify-end</td>
<td>Aligns items along the main axis</td>
</tr>
<tr>
<td>align-items</td>
<td>items-center, items-end</td>
<td>Aligns items along the cross axis</td>
</tr>
<tr>
<td>flex-wrap</td>
<td>flex-wrap, flex-nowrap</td>
<td>Wraps items to the next line when needed</td>
</tr>
<tr>
<td>flex-grow</td>
<td>flex-grow-0, flex-grow</td>
<td>Allows items to grow</td>
</tr>
<tr>
<td>flex-shrink</td>
<td>flex-shrink-0, flex-shrink</td>
<td>Allows items to shrink</td>
</tr>
<tr>
<td>flex-basis</td>
<td>basis-1/2, basis-full</td>
<td>Sets the initial size of an item</td>
</tr>
</tbody>
</table></div>

<h3>
  
  
  Memusatkan dengan Flexbox: Penyelesaian "Just Center It" Tailwind ?‍♀️
</h3>

<p>Flexbox mengambil bahagian tengah daripada menggaru kepala kepada hanya dua kelas: justify-center dan item-center.<br>
</p>

<pre class="brush:php;toolbar:false"><div>




<hr>

<p><strong>2. Grid CSS: Magic Dua Dimensi untuk Reka Letak</strong> Grid ialah adik beradik besar Flexbox—sesuai untuk reka letak 2D yang anda inginkan kawalan ke atas baris <em>dan</em> lajur. Ia adalah pilihan anda apabila anda memerlukan galeri, reka letak yang kompleks atau apa-apa sahaja yang memerlukan struktur secara menegak dan mendatar.</p>

<h3>
  
  
  Menyediakan Susun Atur Grid
</h3>

<p>Untuk menyediakan grid asas, mulakan dengan menentukan lajur anda dengan kelas grid dan grid-cols-*.<br>
</p>

<pre class="brush:php;toolbar:false"><div>



<p>Persediaan ini memberi anda 3 lajur yang sama dengan beberapa ruang pernafasan di antaranya, terima kasih kepada gap-4.</p>

<h3>
  
  
  Sifat Grid Penting
</h3>

<div><table>
<thead>
<tr>
<th>Property</th>
<th>Tailwind Class</th>
<th>What it Does</th>
</tr>
</thead>
<tbody>
<tr>
<td>grid-template-columns</td>
<td>grid-cols-3, grid-cols-6</td>
<td>Defines the number of columns</td>
</tr>
<tr>
<td>grid-template-rows</td>
<td>grid-rows-1, grid-rows-2</td>
<td>Defines the number of rows</td>
</tr>
<tr>
<td>gap</td>
<td>gap-4, gap-6</td>
<td>Adds space between grid items</td>
</tr>
<tr>
<td>grid-column</td>
<td>col-span-1, col-span-2</td>
<td>Sets the column span of an item</td>
</tr>
<tr>
<td>grid-row</td>
<td>row-span-1, row-span-2</td>
<td>Sets the row span of an item</td>
</tr>
</tbody>
</table></div>

<h3>
  
  
  Memusatkan dengan Grid: Easy Peasy
</h3>

<p>Mahukan semuanya tertumpu di dalam grid? Cuba ini:<br>
</p>

<pre class="brush:php;toolbar:false"><div>



<p><em>Petua untuk Menangani Salah Laku Responsif</em><br>
Salah satu sakit kepala yang paling biasa dengan reka letak responsif ialah memasangkan segala-galanya pada skrin yang lebih kecil. Inilah perkara yang perlu dilakukan apabila Grid dan Flex mula bertindak:</p>

• Laraskan Lajur mengikut Saiz Skrin : Gunakan kelas responsif seperti sm:grid-cols-2 atau lg:grid-cols-4 untuk menukar reka letak berdasarkan lebar skrin.

<div>

• Kendalikan Limpahan : Jika kandungan semakin terputus atau melimpah, kelas limpahan auto atau limpahan tersembunyi Tailwind boleh membantu menjinakkan binatang itu.

---

3. Penentududukan: Relatif, Mutlak, Tetap dan Melekit (Tambahan pula Bagaimana Mereka Kadangkala Berkelakuan Salah) ?️‍♂️ Kedudukan CSS boleh seperti menjinakkan kucing nakal—ia pergi ke mana yang ia mahu melainkan anda mengetahui helahnya. Begini cara masing-masing berfungsi, dan beberapa petua apabila mereka mula bertindak.relative: Tetap Diam tetapi Buat Pelarasan
Kedudukan relatif membolehkan anda melaraskan sedikit elemen sambil mengekalkannya dalam aliran biasa dokumen. Hebat untuk nudges kecil!

<div>



mutlak: Elemen Terapung Bebas yang Memerlukan Anchorsabsolute mengalih keluar elemen daripada aliran, menambatnya ke nenek moyang kedudukan terdekat (elemen dengan relatif atau serupa). Tanpa ibu bapa saudara, ia akan berlabuh pada badan.

• Petua Pro : Sentiasa berikan elemen mutlak ibu bapa relatif untuk mengawal peletakan mereka.

<div>



ditetapkan: Sentiasa Ada, Walaupun Apabila Anda Tatal tetapkan elemen kekal di satu tempat walaupun semasa halaman menatal. Ini bagus untuk bar navigasi melekit tetapi boleh menjengkelkan pada mudah alih jika ia bertindih dengan kandungan penting.

• Petua Pro : Tambahkan kelas responsif untuk menyembunyikan elemen tetap pada skrin kecil jika perlu.

<div>



Gunakan sm:block tersembunyi untuk bersembunyi pada mudah alih:



<div>



melekit: Lekat Sehingga Anda Elemen pelekat bertindak seperti relatif sehingga ia mencapai titik tatal, kemudian ia melekat. Ia sesuai untuk pengepala yang anda mahu ikuti tatal tetapi hanya apabila diperlukan.

• Sticky Quirks : Untuk melekit berfungsi, bekasnya mestilah cukup tinggi untuk menatal, atau mungkin tidak melekat langsung.

<div>






4. Peralihan dan Transformasi: Pergerakan Lancar dan Anjakan Visual ?

Transformasi boleh menggerakkan, memutar, menskala dan menyerong elemen—tanpa benar-benar mengalihkan tempatnya dalam aliran dokumen.

  
  
  Asas Transformasi Tailwind


Gunakan terjemah-x-*, terjemah-y-*, putar-* dan skala-* untuk melaraskan kedudukan elemen secara visual.

<div>




  
  
  Peralihan Lancar untuk Kesan Tuding


Untuk mencipta animasi yang lancar, gunakan peralihan-* pada keadaan permulaan. Transformasi peralihan, kelegapan peralihan dan peralihan-semua utiliti Tailwind memudahkannya.



<div>






5. Kandungan Pemusatan: Flexbox, Grid dan Utiliti "Tempat" Yang Maha Kuasa

Memusatkan perkara boleh menjadi sangat sukar. Berikut ialah helah teratas:

• Flexbox : Gunakan justify-center dan item-center.
• Grid : tempat-item-pusat melakukan helah untuk memusatkan kedua-dua secara menegak dan mendatar.

<div>






6. Petua Penyelesaian Masalah: Apabila Flex dan Grid Berlaku Salah pada Skrin Berbeza

• Berpegang pada Pendekatan Grid atau Fleksibel : Mencampur terlalu banyak boleh menghasilkan hasil yang tidak dijangka.
• Gunakan Kelas Responsif : Utiliti responsif Tailwind (sm:, md:, lg:) membantu reka letak menyesuaikan diri dengan anggun.
• Pembetulan Limpahan : Kelas seperti limpahan-tersembunyi atau limpahan-auto memastikan kandungan anda terkawal.

---

Fikiran Terakhir: Tetap Tenang dan Bertenang ? Ingat, ciri reka letak bahagian hadapan adalah sebahagian daripada proses, bukan musuh anda. Dengan kelas utiliti Tailwind dan beberapa helah kedudukan, anda akan mengendalikan walaupun reka letak yang paling rumit seperti seorang profesional. Dan jika keadaan pergi ke tepi? Hanya bernafas, tambahkan justify-center dan ingat: anda mempunyai ini.

Atas ialah kandungan terperinci Flex, Grid dan Kedudukan dalam CSS: Panduan CSS Tailwind Terbaik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!