행당 4개의 항목이 있는 2행 Flexbox 그리드를 만드는 방법은 무엇입니까?

Flexbox: 행당 4개의 항목이 있는 2행 그리드 만들기

Flexbox는 동적 및 반응형 웹 페이지를 만들기 위한 강력한 레이아웃 시스템을 제공합니다. . 일반적인 사용 사례 중 하나는 뷰포트 크기가 변경됨에 따라 항목을 자동으로 래핑하고 크기를 조정하는 그리드형 레이아웃을 만드는 것입니다.

문제: 항목을 여러 행으로 래핑

특정 시나리오에서는 Flexbox 컨테이너가 4개 항목의 2개 행으로 분할하는 대신 8개 항목을 단일 행에 표시하는 문제에 직면하고 있습니다. 각각.

해결책: Flexbox 속성 이해

항목을 강제로 두 행으로 만들려면 두 가지 Flexbox 속성인 flex-wrap 및 flex-grow를 조정해야 합니다.

flex-wrap: 포장

flex-wrap 속성은 컨테이너의 항목을 래핑하여 여러 행을 형성할 수 있는지 여부를 제어합니다. 줄 바꿈으로 설정하면 항목이 필요에 따라 새 줄로 흘러갈 수 있습니다.

flex-grow: 1

flex-grow 속성은 항목은 컨테이너 내의 초과 공간을 분산시킵니다. 값 1은 각 항목이 해당 줄의 사용 가능한 공간을 채우기 위해 비례적으로 증가함을 의미합니다.

문제: 기본값 재정의

원본 코드에서 flex -wrap은 랩으로 설정되었지만 플렉스 항목에서는 flex-grow가 1로 설정되었습니다. 이로 인해 항목이 사용 가능한 전체 너비를 차지하도록 늘어나서 줄바꿈이 방지되었습니다.

수정 사항: 항목 너비 정의

문제를 해결하려면 다음이 필요합니다. 항목이 너무 자라서 강제로 감싸지 않도록 항목의 특정 너비를 정의합니다. 수정된 코드에서는 flex 속성에 세 가지 값을 사용했습니다:

1. flex: 1 0 21%; - 첫 번째 값(1)은 항목의 성장 인자를 1로 설정합니다. 이는 flex-grow: 1과 동일합니다.
2. flex: 1 0 21%; - 두 번째 값(0)은 항목의 수축 계수를 0으로 설정합니다. 즉, 지정된 너비 이하로 줄어들지 않습니다.
3. flex: 1 0 21%; - 세 번째 값(21%)은 항목의 초기 너비를 컨테이너 너비의 21%로 설정합니다.

항목 너비를 정의하여 각각 4개의 항목으로 구성된 2개의 행으로 적절하게 래핑되도록 합니다.

위 내용은 행당 4개의 항목이 있는 2행 Flexbox 그리드를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!