• Q&A
  • 회원가입
  • 로그인

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

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>


결과보기

 

PS.

 

mdn flex-wrap 강의

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap (영어)

https://developer.mozilla.org/ko/docs/Web/CSS/flex-wrap (한국어)

 


오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012