Flexbox와 CSS를 사용하여 반응형 정사각형 그리드를 어떻게 만들 수 있나요?-CSS 튜토리얼-php.cn

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

Barbara Streisand

풀어 주다： 2024-11-26 04:40:08

원래의

499명이 탐색했습니다.

How Can I Create a Responsive Square Grid Using Flexbox and CSS?

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

Flexbox의 높이와 너비 이해

Flexbox를 사용하면 flex 속성을 사용하는 요소 그러나 요소의 높이는 제어되지 않습니다. Flexbox는 기본적으로 요소 간에 사용 가능한 높이를 균등하게 분배합니다.

정사각형 그리드 만들기

정사각형 그리드를 얻으려면 정사각형의 높이와 너비가 모두 필요합니다. 동일해야 합니다. 이렇게 하려면:

가로 세로 비율 설정: CSS 가로 세로 비율 속성을 사용하여 너비와 높이 사이의 고정 비율을 정의할 수 있습니다. 정사각형의 경우 가로 세로 비율을 1/1로 설정합니다.

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

로그인 후 복사

반응형 그리드

뷰포트 너비에 자동으로 조정되는 반응형 그리드를 생성하려면 :

flex를 1로 설정 0 자동: 이렇게 하면 요소가 너비에 맞게 늘어날 수 있지만 원래 너비 아래로 줄어들지는 않습니다.

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

로그인 후 복사

컨테이너 너비 설정: 상위 컨테이너의 전체 너비를 제한하려면 고정 또는 백분율 너비를 지정하세요. 그리드.

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

로그인 후 복사

전체 코드

<body>
  <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>
</body>

로그인 후 복사

.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 중국어 웹사이트의 기타 관련 기사를 참조하세요!