検索

ホームページ  >  記事  >  ウェブフロントエンド  >  CSS グリッドとフレックスボックスを使用してレスポンシブな正方形のグリッドを作成するにはどうすればよいですか?

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

DDD
DDDオリジナル
2024-11-26 11:29:10742ブラウズ

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 サイトの他の関連記事を参照してください。
css define for while auto using class Property this display margin background flex li
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：JavaScript でブラウザで利用可能なフォントをプログラム的に一覧表示するにはどうすればよいですか?次の記事：JavaScript でブラウザで利用可能なフォントをプログラム的に一覧表示するにはどうすればよいですか?
関連記事
続きを見る