내 Flex 항목이 여러 줄로 줄바꿈되지 않는 이유는 무엇입니까?

Flex 항목이 래핑되지 않는 이유

Flex 컨테이너 내에 요소의 여러 행을 생성하려고 시도했지만 대신 목격하는 경우 그것들은 모두 하나의 오버플로 라인으로 제한되어 있습니다. 이는 기본 flex-wrap 때문일 가능성이 높습니다. property.

기본 flex-wrap 동작

기본적으로 Flex 컨테이너의 flex-wrap 속성은 nowrap으로 설정되어 있습니다. 즉, 모든 하위 요소("플렉스 항목")는 전체 너비에 관계없이 한 줄로 제한됩니다. 결과적으로 Flex 항목의 결합된 너비가 상위 컨테이너의 너비를 초과하면 오버플로되어 같은 줄에 나타납니다.

문제 해결: flex-wrap을 Wrap으로 설정

플렉스 항목을 여러 줄로 줄바꿈하려면 flex-wrap 속성을 wrap으로 설정해야 합니다. 이렇게 하면 컨테이너 너비에 도달하면 한 줄에서 다음 줄로 요소가 자연스럽게 흐르게 됩니다.

<br>.container {<br> display: flex;<br> flex- 포장하다: Wrap;<br>}<br>

Flex Wrapping의 예

다음 예를 고려하세요.

< ;pre>
.container {
디스플레이: flex;
플렉스 랩: 랩;
너비: 600px;
}

.item {
너비: 200px;
높이: 200px;
배경- 색상: 파란색;
여백: 5px;
}

이 코드는 고정 너비가 600px인 Flex 컨테이너를 생성합니다. 이 컨테이너 안에는 각각 너비가 200px인 3개의 플렉스 항목이 있습니다. flex-wrap을 래핑으로 설정하면 flex 항목이 컨테이너 너비에 맞게 자동으로 래핑됩니다.

요약하자면, flex 항목이 여러 줄로 래핑되도록 하려면 flex-wrap 속성이 명시적으로 설정되어 있는지 확인하세요. 포장하다. 이렇게 하면 컨테이너 크기 내에서 자연스럽게 흐를 수 있습니다.

위 내용은 내 Flex 항목이 여러 줄로 줄바꿈되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!