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

フレックスボックスを使用した CSS 正方形グリッド

目標は、CSS とフレックスボックスを使用して、完全に応答性の高い正方形のグリッドを作成することです。ビューポートの高さに関係なく正方形のアスペクト比を維持しながら、ビューポートの幅を変更します。

正方形の作成Square

正方形の形状を確実に維持するために、CSS のアスペクト比プロパティを利用します。このプロパティを使用すると、要素の固有のアスペクト比を指定できるため、要素の寸法が維持されます。更新された CSS は次のとおりです。

.flex-item {
  aspect-ratio: 1 / 1;
}

これで、正方形は常に正方形のアスペクト比を維持します。

正方形の拡大縮小

正方形を適切に拡大縮小するには、 Flexbox の flex プロパティ。 flex プロパティは、flex コンテナ内の要素の動作を制御します。使用方法は次のとおりです:

.flex-item {
  flex: 1 0 auto;
}

• flex: 1 は、各四角形がコンテナー内で同じ量のスペースを占めることを意味します。
• 0 は、四角形が同じ量のスペースを占めることを意味します。
• auto は、正方形が利用可能な領域を満たすまで拡大されることを意味します。

水平方向のフィットを維持する

フレックスボックスを使用しても、ビューポートが狭くなりすぎると、正方形が複数の行に折り返される可能性があります。これを防ぐために、フレックス コンテナの justify-content プロパティを space-around に設定します。これにより、正方形が折り返されずにコンテナ内で均等に配置され、位置揃えされるようになります。

フレックス コンテナの更新された CSS:

.flex-container {
  justify-content: space-around;
}

最終結果

これらの手法を実装することにより、 , これで、ビューポートの幅に合わせて完全に拡大縮小および調整される正方形の CSS グリッドを作成できるようになりました。正方形は、ビューポートの高さに関係なく正方形のアスペクト比を維持し、一貫性のある視覚的に心地よいレイアウトを保証します。

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