목차
- flex-direction 예제 - 기본축 방향 결정
- flex-direction 정의
- flex-direction 구문
- 세로축+끝단+아이템(역순/순차)
- flex-direction 관련 주소
flex-direction 예제 - 기본축 방향 결정
flex-direction:row-reverse; (가로축 방향 + 아이템 역순 + 오른쪽 정렬)
<style>
#hz {
width: 400px;
height: 200px;
border: 1px solid silver;
display: -webkit-flex; /* Safari */
-webkit-flex-direction: row-reverse; /* Safari 6.1+ */
display: flex;
flex-direction: row-reverse;
}
#hz div {
width: 50px;
height: 50px;
}
</style>
<div id="hz">
<div style="background-color:coral;">홈</div>
<div style="background-color:lightblue;">짱</div>
<div style="background-color:khaki;">닷</div>
<div style="background-color:pink;">컴</div>
<div style="background-color:lightgrey;">만</div>
<div style="background-color:lightgreen;">세</div>
</div>
결과보기
PS. 위 예제 핑크색 속성값을 바꿔가며 확인 권장.
flex-direction 정의
기본축 방향 결정. (= 플렉스 아이템 방향 지정.)
1.
2.
- 기본값: row
- 상속여부: X
- 애니효과: X
- CSS버전: CSS3
- JS구문: object.style.flexDirection="column-reverse";
3.
IE10 이상 최신브라우저 지원.
※ IE 10은 -ms-접두어 필요.
4. MDN flex-direction 예제보기
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction
flex-direction 구문
selector {flex-direction: row|row-reverse|column|column-reverse|initial|inherit;}
[속성값]
row
(가로축 방향 + 아이템 순차 + 왼쪽 정렬) (기본값)
row-reverse
(가로축 방향 + 아이템 역순 + 오른쪽 정렬)
column
(세로축 방향 + 아이템 순차 + 상단 정렬)
column-reverse
(세로축 방향 + 아이템 역순 + 하단 정렬)
initial
이 속성의 기본값으로 설정.
inherit
부모요소의 속성값 상속.
세로축+끝단+아이템(역순/순차)
flex-direction:column-reverse
세로축 기준 + 끝단 배치 + 아이템 역순
vs
flex-direction:column; justify-content:flex-end
세로축 기준 + 끝단 배치 + 아이템 순차
flex-direction 관련 주소
mdn flex-direction 강의
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction (영어)
https://developer.mozilla.org/ko/docs/Web/CSS/flex-direction (한국어)
