CSS 플렉스 웨이프 속성

정의와 사용법

flex-wrap 속성은 유연한 아이템이 줄을 바꿀지 여부를 정의합니다.

비고:flex 속성은 요소가 유연한 아이템이 아니면 무효입니다.

추가로 참고:

CSS 가이드: CSS 유연한 상자

CSS 참조 가이드:flex 속성

CSS 참조 가이드:flex-basis 속성

CSS 참조 가이드:flex-direction 속성

CSS 참조 가이드:flex-flow 속성

CSS 참조 가이드:flex-grow 속성

CSS 참조 가이드:flex-shrink 속성

HTML DOM 참조 가이드:flexWrap 속성

예제

필요할 때 줄을 바꿀 수 있도록 합니다:

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

본인이 직접 시도해 보세요

CSS 문법

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

속성 값

값 설명
nowrap 기본 값. flex 아이템이 줄을 바꿀 수 없습니다.
wrap flex 아이템이 필요할 때 줄을 바꿉니다.
wrap-reverse flex 아이템이 필요할 때 반대 방향으로 줄을 바꿉니다.
initial 이 속성을 기본 값으로 설정합니다. 참고: initial。
inherit 이 속성을 부모 요소에서 thừa kế합니다. 참고: inherit。

기술 세부 사항

기본 값: nowrap
thừa kế: 아니요
애니메이션 제작: 지원하지 않습니다. 참고:애니메이션 관련 속성。
버전: CSS3
JavaScript 문법: object.style.flexWrap="nowrap"

브라우저 지원

표에서의 숫자는 해당 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

prefix를 사용한 첫 번째 버전의 숫자는 -webkit- 또는 -moz-를 포함한 것입니다.

크롬 IE / 엣지 파이어폭스 사파리 오페라
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0