CSS グリッドとフレックスボックスを使用してレスポンシブな正方形のグリッドを作成するにはどうすればよいですか?
レスポンシブな正方形用の Flexbox を使用した CSS グリッド
CSS グリッドとフレックスボックスを使用してレスポンシブな正方形のグリッドを作成するには、主要な原則を理解し、それらを適用することで実現できます。
方法論:
- 水平方向の分散にフレックスボックスを利用する: フレックスボックスは、正方形を維持しながら水平方向に分散する柔軟性を提供します。幅。 flex または min-width を使用して正方形の幅を調整します。
- 正方形のアスペクト比を定義: 要素が正方形であることを確認するには、アスペクト比を追加します。 : 1 / 1 を正方形のスタイルにします。このプロパティにより、幅と高さが一定の 1:1 比率に保たれます。
- 高さを自動に設定: 幅とは異なり、高さは正方形は自動に設定する必要があります。これにより、アスペクト比を歪めることなく正方形を垂直方向に拡大縮小できます。
- 高さのサイズ変更にはフレックスボックスを使用します: 正方形が垂直方向に拡大縮小すると、ギャップに気づく場合があります。彼らの間で。これらを排除するには、親コンテナに 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 サイトの他の関連記事を参照してください。
このウェブサイトの声明この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











それは&#039; Vueチームにそれを成し遂げてくれておめでとうございます。それは大規模な努力であり、長い時間がかかったことを知っています。すべての新しいドキュメントも同様です。

私はこの非常に正当な質問で誰かに書いてもらいました。 Leaは、ブラウザから有効なCSSプロパティ自体を取得する方法についてブログを書いています。それはこのようなものです。

先日、Corey Ginnivanのウェブサイトから、この特に素敵なビットを見つけました。そこでは、スクロール中にカードのコレクションが互いに積み重ねられていました。

WordPressエディターでユーザーに直接ドキュメントを表示する必要がある場合、それを行うための最良の方法は何ですか?

これらのデスクトップアプリがいくつかあり、目標があなたのサイトをさまざまな次元ですべて同時に表示しています。たとえば、書くことができます

CSS Gridは、レイアウトをこれまで以上に簡単にするように設計されたプロパティのコレクションです。何でもするように、少し学習曲線がありますが、グリッドは

Google Fontsが新しいデザイン(ツイート)を展開したようです。最後の大きな再設計と比較して、これははるかに反復的です。違いをほとんど伝えることができません
