목차
- flex-flow 예제 - (flex-direction / flex-wrap) 속성 일괄 정의
- flex-flow 정의
- flex-flow 구문
- flex-flow 관련 주소
flex-flow 예제 - (flex-direction / flex-wrap) 속성 일괄 정의
<style>
#hz {
width: 200px;
height: 200px;
border: 1px solid gray;
display: -webkit-flex; /* Safari */
-webkit-flex-flow: row-reverse wrap; /* Safari 6.1+ */
display: flex;
flex-flow: row-reverse wrap;
}
#hz div {
width: 50px;
height: 50px;
}
.a {background-color:red}
.b {background-color:orange}
.c {background-color:yellow}
.d {background-color:green}
.e {background-color:blue}
.f {background-color:violet}
</style>
<div id="hz">
<div class='a'>A</div>
<div class='b'>B</div>
<div class='c'>C</div>
<div class='d'>D</div>
<div class='e'>E</div>
<div class='f'>F</div>
</div>
결과보기
flex-flow 정의
(flex-direction , flex-wrap) 속성을 한번에 정의.
1.
요소가 플렉스 아이템(flexible item : 유연한항목) 아닌 경우, 적용 안 됨.
2.
기본값: row nowrap
상속여부: X
애니효과: X
CSS버전: CSS3
JS구문: object.style.flexFlow="column nowrap";
3.
IE 11 이상 주요 최신 브라우저 지원.
flex-flow 구문
selector {flex-flow: flex-direction flex-wrap|initial|inherit;}
[속성값]
flex-direction
플렉스 아이템 방향. (※ 가능값 종류)
row (기본값) : 가로축 기준 + 순차 나열 + 왼쪽 배치
row-reverse : 가로축 기준 + 역순 나열 + 오른쪽 배치
column : 세로축 기준 + 순차 나열 + 상단 배치
column-reverse : 세로축 기준 + 역순 나열 + 하단 배치
initial : 이 속성의 기본값으로 설정.
inherit : 부모 요소의 이 속성값 상속.
flex-wrap
플렉스아이템이 싸져야 하는지 여부. (※ 가능값 종류)
nowrap (기본값) : 줄바꿈 비허용.
wrap : 컨테이너 앞단부터 (아이템 순차 나열 + 줄바꿈 허용)
wrap-reverse : 컨테이너 끝단부터 (아이템 순차 나열 + 줄바꿈 허용) ※ 결과적으로 아이템 역순으로 보임.
initial : 이 속성의 기본값으로 설정.
inherit : 부모 요소의 이 속성값 상속.
initial
이 속성의 기본값으로 설정.
inherit
부모요소 속성값 상속.
flex-flow 관련 주소
mdn flex-flow 강의
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow (영어)
https://developer.mozilla.org/ko/docs/Web/CSS/flex-flow (한국어)
