c CSS

[flex] CSS - flex-wrap 속성(C) ★ - 아이템 줄바꿈 가능 여부. (= flex-wrap속성 = 플렉스랩속성, IE11) ※ 플렉스 컨테이너용 속성

2,069

flex-wrap 예제 - wrap 경우

<style>

#hz {

width: 200px;

height: 200px;

border: 1px solid silver;

display: -webkit-flex; /* Safari */

-webkit-flex-wrap: wrap; /* Safari 6.1+ */

display: flex;

flex-wrap: wrap;

}

#hz div {

width: 50px;

height: 50px;

}

</style>

<div id="hz">

<div style="background-color:coral;">A</div>

<div style="background-color:lightblue;">B</div>

<div style="background-color:khaki;">C</div>

<div style="background-color:pink;">D</div>

<div style="background-color:lightgrey;">E</div>

<div style="background-color:lightgreen;">F</div>

</div>

결과보기

※ 4개는 위에, 2개는 밑에 정렬. (즉, 가로 너비 벗어나면 밑으로 내려감.)

flex-wrap 정의

플렉스아이템 줄바꿈 가능 여부 선택.

1.

요소가 플렉스아이템 아닌 경우, 적용 안 됨.

2.

기본값 : nowrap

상속여부 : X

애니효과 : X

CSS버전 : CSS3

JS 구문 : object.style.flexWrap="nowrap";

3.

IE11 이상 주요 최신브라우저 지원.

일부 구형 브라우저 경우 브라우저접두사 사용.

flex-wrap 구문

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

[속성값]

nowrap
아이템 줄바꿈 비허용. (= 플렉스아이템을 안 둘러쌈) (기본값)

wrap

컨테이너 앞단부터 (아이템 순차 나열 + 줄바꿈 허용)

wrap-reverse
컨테이너 끝단부터 (아이템 순차 나열 + 줄바꿈 허용) ※ 결과적으로, 아이템 역방향으로 보임.

initial

이 속성의 기본값으로 설정.

inherit

부모요소 속성값 상속.

flex-wrap 예제 - nowrap 경우

<style>

#hz {

width: 200px;

height: 200px;

border: 1px solid silver;

display: -webkit-flex; /* Safari */

-webkit-flex-wrap: nowrap; /* Safari 6.1+ */

display: flex;

flex-wrap: nowrap;

}

#hz div {

width: 50px;

height: 50px;

}

</style>

<div id="hz">

<div style="background-color:coral;">A</div>

<div style="background-color:lightblue;">B</div>

<div style="background-color:khaki;">C</div>

<div style="background-color:pink;">D</div>

<div style="background-color:lightgrey;">E</div>

<div style="background-color:lightgreen;">F</div>

</div>

결과보기

※ 6개가 옆으로 나란히 정렬.

flex-wrap 예제 - wrap-reverse 경우

<style>

#hz {

width: 200px;

height: 200px;

border: 1px solid silver;

display: -webkit-flex; /* Safari */

-webkit-flex-wrap: wrap-reverse; /* Safari 6.1+ */

display: flex;

flex-wrap: wrap-reverse;

}

#hz div {

width: 50px;

height: 50px;

}

</style>

<div id="hz">

<div style="background-color:coral;">A</div>

<div style="background-color:lightblue;">B</div>

<div style="background-color:khaki;">C</div>

<div style="background-color:pink;">D</div>

<div style="background-color:lightgrey;">E</div>

<div style="background-color:lightgreen;">F</div>

</div>

결과보기