Flexbox를 사용하여 완벽한 정사각형의 CSS 그리드를 어떻게 만들 수 있습니까?

Flexbox를 사용하는 CSS 정사각형 그리드

제공된 코드 조각에서 Flexbox를 사용하여 정사각형 그리드를 만들었습니다. 그러나 모양이 정사각형이 아니며 뷰포트 높이가 변경되면 높이도 변경됩니다.

원하는 레이아웃을 얻으려면 각 정사각형 요소에 가로 세로 비율이라는 CSS 속성을 적용해야 합니다. 종횡비 속성은 요소가 특정 너비 대 높이 비율을 유지하도록 합니다. 귀하의 경우 정사각형을 정사각형으로 만들고 싶으므로 종횡비를 1/1로 설정해야 합니다.

업데이트된 코드는 다음과 같습니다.

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

By 종횡비 속성을 설정하면 뷰포트의 너비나 높이에 관계없이 정사각형이 항상 정사각형 모양을 유지합니다.

위 내용은 Flexbox를 사용하여 완벽한 정사각형의 CSS 그리드를 어떻게 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!