CSS 참조 가이드

CSS @규칙(RULES)

flex-wrap CSS 속성은 flex 항목을 한 행에 강제로 배치하거나, flex 컨테이너에서 사용할 수 있는 공간에 따라 여러 행이나 열로 배치할지를 지정합니다.

다음 표는 이 속성의 사용 설명과 버전 기록, 그리고 JavaScript 스크립트에서 이 속성의 사용 문법을 설명합니다.

기본 값:	nowrap
적용:	유연한 컨테이너
thừa kế:	없음
애니메이션 가능:	아니요.보기: 애니메이션 속성。
버전:	CSS3의 새 기능
JavaScript 문법:	object.style.flexWrap="wrap-reverse"

이 속성의 문법은 다음과 같습니다:

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

다음 예제는 flex를 사용하는 방법을 보여줍니다.-wrap 속성.

예제

.flex-container　{
　　　　/*　사파리　*/
　　　　display:　-웹크리트-flex;
　　　　-웹크리트-flex-wrap: nowrap;
　　　　
　　　　display: flex;
　　　　flex-wrap: nowrap;
}

다음 표는 이 속성의 값을 설명합니다.

값	설명
nowrap	기본 값. 유연한 항목이 줄 바꿈되거나 열 바꿈되지 않습니다.
wrap	필요한 경우, 유연한 항목이 여러 행으로 나누어집니다.
wrap-reverse	wrap과 동일하지만, 항목은 반대 순서로 줄 바꿈됩니다.
initial	이 속성을 기본 값으로 설정합니다.
inherit	지정된 경우, 관련 요소는 부모 요소의 flex를 사용합니다.-wrap 속성 값.

flex-wrap 속성의 브라우저 호환성을 보여주는 표에서의 숫자는 이 속성을 지원하는 브라우저의 최소 버전 번호를 나타냅니다. 모든 주요 브라우저는 이 속성을 지원합니다.

	파이어폭스18+ ^-moz-，28+ 구글 크롬 21+ ^{-웹크리트-}，29+ 인터넷 익스플로러 11+ Apple 사파리 6。1+ ^{-웹크리트-} 오페라 12。1+

다음 튜토리얼을 참조하십시오:CSS3다 열 레이아웃。