flex-wrap 속성은 다양한 화면 크기에서 부모 요소의 반응 속도를 높이는 빠른 방법입니다. 일반적으로 flexbox와 마찬가지로 페이지 레이아웃을 단순화하므로 수동으로 중단 점을 설정하거나 페이지 오버플로를 직접 관리 할 필요가 없습니다.

https://alligator.io/css/improve-responsiveness-flex-wrap/ 

Flexbox 및 요소 래핑 관리 

flex-wrap은 CSS의 flexbox (또는 "flexible box") 모듈 전용 속성입니다. Flexbox는 자식 요소가 부모 요소에 표시되는 방식을 관리하는 CSS 레이아웃 모델입니다. 즉, flexbox는 일반적인 페이지 레이아웃 (예 : 머리글, 탐색 메뉴, 바닥 글 등)에 유용 할 수 있습니다. 더 중요한 것은 자식 요소가 있는 페이지의 모든 요소에 적용 할 수 있다는 것입니다.

div.parent { display: flex; } 

요소를 플렉스 컨테이너로 만드는 것은 디스플레이를 추가하는 것만 큼 간단합니다. flex; CSS 선언에.

Flex 컨테이너가 있으면 같은 부모 요소에 flex-wrap을 선언하여 기본적으로 한 줄에 맞지 않는 자식 요소를 처리하는 방법을 결정할 수 있습니다.

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

flex-wrap을 적용하기 전에 상위 요소를 플렉스 컨테이너로 만들어야 합니다. flex-wrap 속성은 플렉스 컨테이너에만 적용됩니다 (자식 요소는 아님). ?

flex-wrap의 기본 설정 

기본적으로 flex 컨테이너는 자식 요소를 한 줄에 맞추려고 합니다. 이것은 flex-wrap 속성에 대한 nowrap이라고도 합니다.

이 예제에서는 먼저 자식 요소 (블록 요소)가 새로운 줄에 있는 비가 요성 컨테이너부터 시작하겠습니다.

부모 요소를 flex 컨테이너로 만들면 자식은 모두 한 줄로 이동합니다.

.flex-container { display: flex; flex-wrap: nowrap; } 

flex 컨테이너의 기본 flex-wrap 설정은 "no-wrap"입니다. 즉, 위에서 한 것처럼 명시 적으로 선언 할 필요가 없습니다.

이제 한 줄에 자식 요소가 있지만 창에 충분한 공간이 없어도 자식 요소가 한 줄에 유지됩니다. 창 크기가 변경되면 하위 요소가 결국 상위 요소를 오버플로 할 때까지 하위 요소가 계속 뭉개집니다.

그렇다면 어떻게 해결할 수 있습니까? 구조에 플렉스 랩! ?

flex-wrap 옵션 알아보기 

flex-wrap 속성에는 세 가지 유효한 값이 있습니다.

• nowrap : Flex 컨테이너의 기본 값이므로 다른 스타일을 재정의 하지 않는 한 명시 적으로 선언 할 필요가 없습니다. 자식 요소는 항상 한 줄로 유지됩니다.
• wrap : wrap을 사용하면 자식 요소가 더 이상 초기 줄에 맞지 않을 때 추가 줄을 줄 바꿈 할 수 있습니다. 맞지 않는 요소는 부모 요소의 왼쪽 아래로 줄 바꿈 됩니다.
• wrap-reverse : wrap의 반대 효과가 발생합니다. 넘침 요소를 왼쪽 아래로 줄 바꿈 하는 대신 부모의 왼쪽 상단에서 첫 번째 자식 요소 위의 새 줄로 줄 바꿈 합니다.

wrap과 wrap-reverse의 차이점을 보려면 창 크기를 조정하여 다음 두 예제를 비교하십시오.

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

이 첫 번째 예는 첫 번째 하위 요소 아래에 새 행으로 이동하는 오버 플로우 요소가 있습니다.

.flex-container { display: flex; flex-wrap: wrap-reverse; } 

이 두 번째 예제는 반대로 수행하고 넘친 요소를 첫 번째 자식 요소 위에 래핑합니다. wrap-reverse은 일반적으로 사용하기 쉽지 않지만 CSS 툴킷에는 여전히 좋습니다. ?

flexbox 속기 : flex-flow 

가능한 한 적은 수의 코드로 코드를 작성하려는 사람이라면 flex-wrap이 flexbox 속기 flex-flow의 일부라는 것을 알게 되어 기쁩니다.

flex-flow는 flex-wrap과 flex-direction을 대체하는 flexbox 속성입니다.

flex-flow 사용 

flex-flow는 부모 요소의 flex-direction을 먼저 선언하고 flex-wrap 값을 두 번째로 선언합니다. flex-direction과 flex-wrap을 기본 값과 다르게 명시 적으로 선언해야 하는 경우에만 사용해야 합니다.

즉, 다음과 같이 이러한 flex 속성을 작성할 수 있습니다.

.backwards-flex-container { flex-direction: row-reverse; flex-wrap: wrap-reverse; } 

또는 flex-flow 속기를 사용하여 동일한 효과를 얻을 수 있습니다.

.backwards-flex-container { flex-flow: row-reverse wrap-reverse; } 

이 "뒤로"예제는 자식 요소를 연속적으로 나열하지만 반대 순서 (flex-direction)로 만듭니다. 또한 넘친 하위 항목이 첫 번째 행 위의 새 행으로 줄 바꿈 됩니다. ✨

flex-flow는 특별히 flex-wrap을 포함하는 유일한 flexbox 속기이지만 다른 것들도 많이 있습니다. 단축을 선호하는 경우 대부분의 flexbox 속성에는 단축 옵션이 있습니다! ?

브라우저 지원 

일반적으로 flexbox와 flex-wrap은 모든 최신 브라우저에서 잘 지원됩니다. IE (Internet Explorer)조차도 IE9 이후에 flexbox 및 flex-wrap을 부분적으로 지원합니다.

Flexbox 접두사 

flexbox 및 flex-wrap에 접두사를 사용하는 것은 요즘 덜 일반적이며 사용 여부는 지원하려는 브라우저 버전에 따라 다릅니다.

.parent { display: flex; display: -webkit-flex; /* old versions of Chrome/Safari/Opera */ display: -ms-flexbox; /* IE10 */ flex-wrap: wrap; -webkit-flex-wrap: wrap; /* old versions of Chrome/Safari/Opera */ } 

flex-wrap은 Firefox와 같은 일부 이전 버전의 브라우저에서 특별히 지원되지 않는 flexbox의 속성 중 하나입니다. 

접두사가 필요한지 확인하려면 특히 이전 버전의 브라우저를 지원하는 경우 Can I Use를 선택하십시오. ?