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

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

フレックスボックスの高さと幅について理解する

フレックスボックスでは、幅を設定できますflex プロパティを使用する要素。ただし、要素の高さは制御しません。フレックスボックスは、デフォルトで要素間で利用可能な高さを均等に配分します。

正方形グリッドの作成

正方形のグリッドを実現するには、正方形の高さと幅の両方が必要です。等しくなければなりません。これを行うには:

1. アスペクト比を設定します: CSS のアスペクト比プロパティを使用して、幅と高さの固定比率を定義できます。正方形の場合、アスペクト比を 1 / 1 に設定します。

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

レスポンシブ グリッド

ビューポートの幅に自動的に調整されるレスポンシブ グリッドを作成するには:

1. フレックスを次のように設定します1 0 auto: これにより、要素は幅に合わせて拡大できますが、元の幅よりも縮小することはできません。

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

2. コンテナの幅を設定します。 親コンテナの幅の合計を制限するには、親コンテナの固定幅またはパーセント幅を指定します。グリッド。

.flex-container {
  width: 100%;
  max-width: 800px;
}

完全なコード

  <div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
  </div>

.flex-container {
  width: 100%;
  max-width: 800px;
  display: flex;
  justify-content: space-around;
  height: 50px;
  line-height: 30px;
}

.flex-item {
  background: tomato;
  margin: 5px;
  color: white;
  font-weight: bold;
  font-size: 1.5em;
  text-align: center;
  flex: 1 0 auto;
  aspect-ratio: 1 / 1;
}

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