ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS グリッドとフレックスボックスを使用してレスポンシブな正方形のグリッドを作成するにはどうすればよいですか?
CSS グリッドとフレックスボックスを使用してレスポンシブな正方形のグリッドを作成するには、主要な原則を理解し、それらを適用することで実現できます。
これらを組み込んだ改訂されたコード サンプルは次のとおりです。原則:
表示: 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>
<div class="flex-item">1</div><br> <div> <div class="flex-item">3</div> <br> <div> <div class="flex-item">5</div> <br> <div> <div class="flex-item">7</div> <br> </div>> ;<br>”</div> </div>
以上がCSS グリッドとフレックスボックスを使用してレスポンシブな正方形のグリッドを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。