미디어 쿼리를 사용하여 래핑된 Flex 항목의 균일한 너비를 유지하려면 어떻게 해야 합니까?

포장된 Flex 항목의 균일한 너비 유지

Flexbox를 사용하여 일련의 항목을 표시하는 경우 균일한 너비를 유지하는 것이 바람직할 수 있습니다. 항목이 여러 줄에 걸쳐 있는 경우에도 마찬가지입니다. 전통적으로 이는 특히 항목의 너비가 min-width 및 max-width를 사용하여 지정된 범위 내에 있는 경우 문제가 되었습니다.

이 기사에서는 미디어 쿼리를 활용하여 원하는 효과를 얻는 독특하지만 효과적인 해결 방법을 제시합니다. .

믹스인 (SCSS)

@mixin flex-wrap-fix($flex-basis, $max-viewport-width: 2000px) {
  flex-grow: 1;
  flex-basis: $flex-basis;
  max-width: 100%;

  $multiplier: 1;
  $current-width: 0px;

  @while $current-width < $max-viewport-width {
    $current-width: $current-width + $flex-basis;
    $multiplier: $multiplier + 1;

    @media(min-width: $flex-basis * $multiplier) {
      max-width: percentage(1/$multiplier);
    }
  }
}

사용법

해결 방법을 적용하려면 간단히 믹스인을 플렉스 항목에 적용하세요.

.flex-item {
  @include flex-wrap-fix(100px)
}

설명

저희는 브라우저 창 너비를 기준으로 항목의 최대 너비를 정의하는 미디어 쿼리를 생성합니다. 예를 들어, 각 항목의 최대 너비가 100px이어야 하는 경우 100px~600px 범위의 브라우저 너비에 대한 미디어 쿼리를 생성하여 항목 너비가 다양한 브라우저 크기에 맞게 조정되도록 합니다.

이 믹스인을 구현하면, 래핑된 플렉스 항목은 지정된 제약 조건 내에서 정의된 너비를 유지합니다. 불일치를 방지하려면 Flex 컨테이너 너비가 뷰포트 크기와 일치해야 한다는 점에 유의하는 것이 중요합니다.

또한 제공된 업데이트를 사용하면 Flex 컨테이너에 해결 방법을 적용할 수 있으므로 관계없이 적절한 항목 래핑 및 너비 유지 관리가 가능합니다. 플렉스 컨테이너 너비.

위 내용은 미디어 쿼리를 사용하여 래핑된 Flex 항목의 균일한 너비를 유지하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!