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 (한국어)
주소 복사
랜덤 이동