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

1. flex-wrap 예제 - wrap 경우, 아이템 줄바꿈 상태
2. flex-wrap 정의
3. flex-wrap 구문
4. flex-wrap 예제 - nowrap 경우, 아이템 줄바꿈 상태
5. flex-wrap 예제 - wrap-reverse 경우, 아이템 줄바꿈 상태
6. flex-wrap 관련 주소

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 이상 주요 최신브라우저 지원.

IE11 경우, 부분 지원.

 

4.

MDN flex-wrap 예제 보기

 

flex-wrap 구문

 

selector {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>

결과보기