Flexbox를 사용하여 행당 4개의 항목을 보장하려면 어떻게 해야 합니까?

Flexbox: 행당 4개 항목 적용

반응형 디자인 영역에서 Flexbox는 요소 레이아웃을 위한 강력한 도구를 제공합니다. 그러나 행당 고정된 수의 항목을 적용하는 등 특정 레이아웃을 달성하는 것이 항상 간단한 것은 아닙니다.

문제 이해

원래 쿼리에 설명된 대로 목표는 8개를 표시하는 것입니다. 행당 4개 항목의 일관된 배열을 유지하면서 Flexbox 컨테이너에 항목을 저장합니다. 기본적으로 Flexbox는 사용 가능한 공간을 따라 항목을 균등하게 배포하므로 항목 수가 원하는 너비를 초과하면 행이 고르지 않게 되는 경우가 많습니다.

해결책: Flex-Grow 재정의

이 시나리오에서는 문제는 개별 플렉스 항목에 적용된 flex-grow 속성에서 발생합니다. Flex-grow는 항목이 사용 가능한 공간을 차지하도록 пропорционально를 확장하도록 지시합니다. 그러나 항목에는 너비가 정의되어 있지 않으므로 계속해서 0으로 줄어들고 줄 바꿈되지 않습니다.

행당 특정 항목 수를 적용하는 핵심은 플렉스 항목의 너비를 정의하는 것입니다. 고정 너비를 설정하면 각 항목이 미리 결정된 공간을 차지하므로 사용 가능한 공간을 초과하면 강제로 래핑됩니다.

구현

다음 CSS 코드는 8개 항목이 표시되도록 하는 방법을 보여줍니다. 2줄로 4:

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  flex: 1 0 21%;
  margin: 5px;
  height: 100px;
  background-color: blue;
}

• Flex: 1 0 21%; - 이 flex 약칭 속성:

  • 1: 이에 비례하여 아이템이 늘어나도록 지시합니다(사용 가능한 공간이 있는 경우). value.
  • 0: 항목이 줄어들지 않도록 항목의 최소 너비를 설정합니다.
  • 21: 개별 항목의 너비를 다음과 같이 정의합니다. 상위 컨테이너 너비의 21%입니다. flex 값을 기준으로 하면 각 행에 4개의 항목이 들어갈 수 있습니다.
• Flex-wrap: Wrap; - 항목을 다음 줄로 줄 바꿈할 수 있습니다. 컨테이너 너비가 부족한 경우.

결론

고정 너비 설정으로 플렉스 항목의 경우 플렉스 래핑을 활성화하면 플렉스박스 레이아웃에서 행당 특정 항목 수를 적용하는 것이 가능해집니다. 이 기술을 사용하면 디자이너는 웹 요소의 반응성과 레이아웃을 더 효과적으로 제어할 수 있습니다.

위 내용은 Flexbox를 사용하여 행당 4개의 항목을 보장하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!