Bagaimanakah Saya Boleh Membuat Grid Petak Responsif Menggunakan Grid CSS dan Flexbox?-tutorial css-php.cn

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:

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.

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.

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.

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
                
                                            
                            
                                
                                Bagaimana Saya Boleh Menyahmarshal Mesej Protobuf Tidak Diketahui dalam Go?
                            
                            2024-11-30 09:21:13
                        
                                            
                            
                                
                                Bagaimanakah Saya Boleh Mencipta Navbar Yang Menghidupkan/Mengecut pada Tatal Menggunakan Bootstrap?
                            
                            2024-11-30 09:20:11
                        
                                            
                            
                                
                                Bagaimanakah Operator `instanceof` Java Menentukan Jenis Objek?
                            
                            2024-11-30 09:19:09
                        
                                            
                            
                                
                                Bagaimanakah Saya Boleh Memantau Penggunaan CPU, Memori dan Cakera dalam Java?
                            
                            2024-11-30 09:18:10
                        
                                            
                            
                                
                                Bagaimana untuk Memasukkan Tarikh Terikat Atas Apabila Memilih Data Antara Dua Tarikh dalam MySQL?
                            
                            2024-11-30 09:16:10
                        
                                            
                            
                                
                                Bagaimanakah `std::vector::resize()` dan Boost.Container's C 11 Mengendalikan Elemen Tidak Dimulakan?
                            
                            2024-11-30 09:15:14
                        
                                            
                            
                                
                                PHP: Cara praktikal untuk melarikan diri dari neraka Dates
                            
                            2024-11-30 09:14:19
                        
                                            
                            
                                
                                Bagaimana untuk Memaparkan Rentetan HTML sebagai JSX dengan Selamat dalam React?
                            
                            2024-11-30 09:13:10
                        
                                            
                            
                                
                                Mengapa JSON Unmarshal Gagal Apabila Memetakan Tatasusunan untuk Pergi Structs?
                            
                            2024-11-30 09:12:17
                        
                                            
                            
                                
                                Bilakah `json.Marshal` Gagal Apabila Marshaling `map[rentetan]rentetan` dalam Go?
                            
                            2024-11-30 09:11:13
                        
                                    
            
            
                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
                                    2042
                                
                            
                        
                    
                    
                                        
                        
                            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
                                    2201
                                
                            
                        
                    
                    
                                        
                        
                            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
                                    1858
                                
                            
                        
                    
                    
                                        
                        
                            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
                                    1745
                                
                            
                        
                    
                    
                                        
                        
                            Di manakah perisian kursus tentang pemetaan minda CSS?
                            Perisian kursus
                            
                                
                                     daripada 2024-04-16 10:10:18
                                
                                
                                      0 
                                    0
                                    1766
                                
                            
                        
                    
                    
                                    
            

            
                
                    Topik-topik yang berkaitan
                    Lagi>
                    
                
                
                    
                                                
                             
                            Peranan Serverlet dalam Java 
                        
                                                
                             
                            Bagaimana untuk membaca lajur dalam excel dalam python 
                        
                                                
                             
                            Apakah perbezaan antara paparan pangkalan data dan jadual 
                        
                                                
                             
                            Peranan tag asas 
                        
                                                
                             
                            Tutorial C# 
                        
                                                
                             
                            Apakah kegunaan dezender? 
                        
                                                
                             
                            Bagaimana untuk berkongsi pencetak antara dua komputer 
                        
                                                
                             
                            Penggunaan UpdatePanel

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