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

1. flex-wrap 예제 - wrap 경우, 줄바꿈 O + 아이템 순차 나열
2. flex-wrap 정의
3. flex-wrap 구문
4. flex-wrap 예제 - nowrap 경우, 줄바꿈 X + 아이템 순차 나열
5. flex-wrap 예제 - wrap-reverse 경우, 줄바꿈 O + 아이템 역순 나열

flex-wrap 예제 - wrap 경우, 줄바꿈 O + 아이템 순차 나열 

 

<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.

• 요소가 플렉스아이템 아닌 경우, 적용 안 됨.
• flex-flow 속성 - flex-direction 속성과 flex-wrap 속성을 일괄 지정.

 

2.

• 기본값: nowrap
• 상속여부: X
• 애니효과: X
• CSS버전: CSS3
• JS구문: object.style.flexWrap="nowrap";

 

3.

IE 11 이상 주요 최신 브라우저 지원. (단, IE 11 경우, 부분 지원.)

 

4. MDN flex-wrap 예제 보기

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

 

flex-wrap 구문

 

selector {flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;}

 

---

[속성값]

 

nowrap

아이템 줄바꿈 허용 X (※ 필요 시, 아이템 크기 축소해 한 줄에 배치) (기본값)

 

wrap

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

wrap-reverse

아이템 줄바꿈 허용 O + 컨테이너 끝단 왼편부터 아이템 역순 나열

• 역순 의미: flex-direction:row 경우, 플렉스 상자 끝 왼쪽부터 채움. /  flex-direction:row 경우, 플렉스 상자 끝 오른쪽부터 채움. / flex-direction:column 경우, 플렉스 상자 왼쪽 상단부터 채움. / flex-direction:column-reverse 경우, 플렉스 상자 오른쪽 하단부터 채움./

 

initial

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

 

inherit

부모요소 속성값 상속.

 

flex-wrap 예제 - nowrap 경우, 줄바꿈 X + 아이템 순차 나열

 

<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 경우, 줄바꿈 O + 아이템 역순 나열

 

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

결과보기