Flexbox를 사용하여 완전히 반응하는 CSS 정사각형 그리드를 어떻게 만들 수 있나요?

Flexbox를 사용한 CSS 정사각형 그리드

목표는 CSS와 Flexbox를 사용하여 완벽하게 반응하는 정사각형 그리드를 만드는 것입니다. 여기서 정사각형은 크기가 조정되고 완벽하게 조정됩니다. 뷰포트 높이에 관계없이 정사각형 종횡비를 유지하면서 뷰포트 너비.

정사각형 만들기 정사각형

정사각형이 정사각형 모양을 유지하도록 하기 위해 CSS 종횡비 속성을 활용합니다. 이 속성을 사용하면 요소의 고유한 종횡비를 지정하여 크기를 보존할 수 있습니다. 업데이트된 CSS는 다음과 같습니다.

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

이제 정사각형은 항상 정사각형 종횡비를 유지합니다.

사각형 크기 조정

사각형 크기를 적절하게 조정하려면 다음을 사용합니다. Flexbox의 flex 속성. flex 속성은 flex 컨테이너 내에서 요소의 동작을 제어하는 ​​역할을 합니다. 사용 방법은 다음과 같습니다.

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

• flex: 1은 각 사각형이 컨테이너 내에서 동일한 양의 공간을 차지한다는 의미입니다.
• 0은 사각형이 컨테이너 내에서 동일한 양의 공간을 차지한다는 의미입니다. 초기 크기 이하로 줄어들지 않습니다.
• auto는 사각형이 사용 가능한 공간을 채울 만큼 커지는 것을 의미합니다. space.

가로 맞춤 유지

Flexbox를 사용하더라도 뷰포트가 너무 좁아지면 사각형이 여러 줄로 바뀔 수 있습니다. 이를 방지하기 위해 플렉스 컨테이너의 justify-content 속성을 space-around로 설정했습니다. 이렇게 하면 정사각형이 포장되지 않고 컨테이너 내에서 고르게 분포되고 정렬됩니다.

플렉스 컨테이너에 대해 업데이트된 CSS:

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

최종 결과

이러한 기술을 구현하여 , 이제 뷰포트 너비에 맞게 완벽하게 크기를 조정하고 조정하는 사각형의 CSS 그리드를 만들 수 있습니다. 정사각형은 뷰포트 높이에 관계없이 정사각형 종횡비를 유지하여 일관되고 시각적으로 보기 좋은 레이아웃을 보장합니다.

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