masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Membuat Grid Petak Responsif Menggunakan Grid CSS dan Flexbox?

Bagaimanakah Saya Boleh Membuat Grid Petak Responsif Menggunakan Grid CSS dan Flexbox?

DDD
Lepaskan： 2024-11-26 11:29:10
asal
799 orang telah melayarinya

How Can I Create a Responsive Grid of Squares Using CSS Grid and Flexbox?

Grid CSS dengan Flexbox untuk Petak Responsif

Mewujudkan grid petak responsif menggunakan Grid CSS dan Flexbox boleh dicapai dengan memahami prinsip utama dan menerapkannya dengan berkesan.

Metodologi:


  1. Gunakan Flexbox untuk Pengagihan Mendatar: Flexbox menyediakan fleksibiliti untuk mengagihkan petak secara mendatar sambil mengekalkannya lebar. Laraskan lebar segi empat sama menggunakan lentur atau lebar min.

  2. Tentukan Nisbah Aspek Segiempat: Untuk memastikan elemen adalah segi empat sama, tambahkan nisbah aspek : 1 / 1 kepada gaya segi empat sama. Sifat ini memastikan bahawa lebar dan tinggi kekal dalam nisbah 1:1 yang tetap.

  3. Tetapkan Ketinggian kepada Auto: Tidak seperti lebar, ketinggian segi empat sama hendaklah ditetapkan kepada auto. Ini membolehkan petak itu menskala secara menegak tanpa memutarbelitkan nisbah bidangnya.

  4. Gunakan Flexbox untuk Saiz Semula Ketinggian: Semasa petak berskala menegak, anda mungkin melihat jurang antara mereka. Untuk menghapuskan perkara ini, tambahkan item penjajaran: regangan ke bekas induk, pastikan petak meregang untuk memenuhi ruang menegak yang tersedia.

Pelaksanaan Kod:

Berikut ialah contoh kod yang disemak yang menggabungkannya prinsip:


 paparan: flex;<br> justify-content: space-around ;<br> align-content: regangan;<br>}<br>.flex-item {<br> latar belakang: tomato;<br> jidar: 5px;<br> warna: putih;<br> berat fon: tebal;<br> saiz fon: 1.5em;<br> jajaran teks: tengah; <br> lentur: 1 0 auto;<br> nisbah bidang: 1 / 1;<br> ketinggian: auto;<br>}<br>

 
1

 
 
3

 
 
5

 
 
7

”
Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Grid Petak Responsif Menggunakan Grid CSS dan Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
                

            

            

                                
sumber：php.cn

                            

            

                                    
                        Artikel sebelumnya：Bagaimanakah Saya Boleh Menyenaraikan Fon Tersedia Penyemak Imbas Secara Program dalam JavaScript?
                    
                                    
                        Artikel seterusnya：Bagaimanakah Pengendali Logikal CSS \"dan\" dan \"atau\" Mendayakan Penggayaan Tepat?
                    
                            

            

       
                
Kenyataan Laman Web ini

                
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

            

            

            

                
Artikel terbaru oleh pengarang

                
            

            

                
Isu terkini

                

                                        

                        

                            function_exists() tidak boleh menentukan fungsi tersuai
                            Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
                            

                                

                                     daripada 2024-04-29 11:01:01
                                

                                

                                    
  0 

                                    
3

                                    
2192

                                

                            

                        

                    

                    

                                        

                        

                            Bagaimana untuk memaparkan versi mudah alih Google Chrome
                            Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
                            

                                

                                     daripada 2024-04-23 00:22:19
                                

                                

                                    
  0 

                                    
11

                                    
2340

                                

                            

                        

                    

                    

                                        

                        

                            Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas.
                            Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
                            

                                

                                     daripada 2024-04-19 15:37:47
                                

                                

                                    
  0 

                                    
1

                                    
1963

                                

                            

                        

                    

                    

                                        

                        

                            Tiada output dalam tetingkap induk
                            document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
                            

                                

                                     daripada 2024-04-18 23:52:34
                                

                                

                                    
  0 

                                    
1

                                    
1851

                                

                            

                        

                    

                    

                                        

                        

                            Di manakah perisian kursus tentang pemetaan minda CSS?
                            Perisian kursus
                            

                                

                                     daripada 2024-04-16 10:10:18
                                

                                

                                    
  0 

                                    
0

                                    
1909

                                

                            

                        

                    

                    

                                    

            


            

                

                    
Topik-topik yang berkaitan

                    Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan

Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！

Tentang kita Penafian Sitemap

© php.cn All rights reserved