コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS グリッドとフレックスボックスを使用してレスポンシブな正方形のグリッドを作成するにはどうすればよいですか?

CSS グリッドとフレックスボックスを使用してレスポンシブな正方形のグリッドを作成するにはどうすればよいですか?

DDD
リリース： 2024-11-26 11:29:10
オリジナル
761 人が閲覧しました

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

レスポンシブな正方形用の Flexbox を使用した CSS グリッド

CSS グリッドとフレックスボックスを使用してレスポンシブな正方形のグリッドを作成するには、主要な原則を理解し、それらを適用することで実現できます。

方法論:


  1. 水平方向の分散にフレックスボックスを利用する: フレックスボックスは、正方形を維持しながら水平方向に分散する柔軟性を提供します。幅。 flex または min-width を使用して正方形の幅を調整します。

  2. 正方形のアスペクト比を定義: 要素が正方形であることを確認するには、アスペクト比を追加します。 : 1 / 1 を正方形のスタイルにします。このプロパティにより、幅と高さが一定の 1:1 比率に保たれます。

  3. 高さを自動に設定: 幅とは異なり、高さは正方形は自動に設定する必要があります。これにより、アスペクト比を歪めることなく正方形を垂直方向に拡大縮小できます。

  4. 高さのサイズ変更にはフレックスボックスを使用します: 正方形が垂直方向に拡大縮小すると、ギャップに気づく場合があります。彼らの間で。これらを排除するには、親コンテナに align-items:stretch を追加し、利用可能な垂直方向のスペースを満たすように正方形が伸びるようにします。

コードの実装:

これらを組み込んだ改訂されたコード サンプルは次のとおりです。原則:


 表示: flex;<br> justify-content: space-around ;<br> align-content: ストレッチ;<br>}<br>.flex-item {<br> 背景:トマト;<br> マージン: 5px;<br> カラー: ホワイト;<br> フォントの太さ: 太字;<br> フォント サイズ: 1.5em;<br> テキストの配置: センター;<br> フレックス: 1 0 自動;<br> アスペクト比: 1 / 1;<br> 高さ: auto;<br>}<br>

 
1

 
 
3

 
 
5

 
 
7

”
以上がCSS グリッドとフレックスボックスを使用してレスポンシブな正方形のグリッドを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
                

            

            

                                
ソース：php.cn

                            

            

                                    
                        前の記事：JavaScript でブラウザで利用可能なフォントをプログラム的に一覧表示するにはどうすればよいですか?
                    
                                    
                        次の記事：CSS 論理演算子「and」および「or」を使用すると、どのようにして正確なスタイル設定が可能になりますか?
                    
                            

            

       
                
このウェブサイトの声明

                
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

            

            

            

                
著者別の最新記事

                
            

            

                
最新の問題

                

                                        

                        

                            function_exists() はカスタム関数を決定できません
                            Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
                            

                                

                                     から 2024-04-29 11:01:01
                                

                                

                                    
  0 

                                    
3

                                    
2041

                                

                            

                        

                    

                    

                                        

                        

                            Google Chromeのモバイル版を表示する方法
                            こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
                            

                                

                                     から 2024-04-23 00:22:19
                                

                                

                                    
  0 

                                    
11

                                    
2200

                                

                            

                        

                    

                    

                                        

                        

                            子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。
                            最初の 2 つの文は実行可能ですが、最後の文は実装できません。
                            

                                

                                     から 2024-04-19 15:37:47
                                

                                

                                    
  0 

                                    
1

                                    
1855

                                

                            

                        

                    

                    

                                        

                        

                            親ウィンドウには出力がありません
                            document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
                            

                                

                                     から 2024-04-18 23:52:34
                                

                                

                                    
  0 

                                    
1

                                    
1745

                                

                            

                        

                    

                    

                                        

                        

                            CSS マインド マッピングに関するコースウェアはどこにありますか?
                            コースウェア
                            

                                

                                     から 2024-04-16 10:10:18
                                

                                

                                    
  0 

                                    
0

                                    
1766

                                

                            

                        

                    

                    

                                    

            


            

                

                    
関連トピック

                    詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート