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

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

提供されたコード スニペットでは、フレックスボックスを使用して正方形のグリッドを作成しました。ただし、形状は正方形ではなく、ビューポートの高さが変わると高さも変わります。

希望のレイアウトを実現するには、アスペクト比という名前の CSS プロパティを各正方形要素に適用する必要があります。アスペクト比プロパティは、要素に特定の幅と高さの比率を強制的に維持させます。あなたの場合、正方形を正方形にしたいので、アスペクト比を 1 / 1 に設定する必要があります。

更新されたコードは次のようになります。

.flex-item {
  aspect-ratio: 1 / 1;
  /* Rest of your styles here */
}

Byアスペクト比プロパティを設定すると、ビューポートの幅や高さに関係なく、正方形は常に正方形の形状を維持します。

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