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

[flex] CSS - flex-direction 속성(C) ★★ - 기본축 방향 결정. (= flex-direction속성 = 플렉스디렉션속성, IE11) ※ 플렉스 컨테이너용 속성

flex-direction 예제

 

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


결과보기

 

 

flex-direction 정의

 

기본축 방향 결정. (= 플렉스 아이템 방향 지정.)

 


 

1.

요소가 플렉스 아이템 아닌 경우, 적용 안 됨.

 

2.

기본값 : row

상속여부 : X

애니효과 : X

CSS버전 : CSS3

JS구문 : object.style.flexDirection="column-reverse";

 

3.

IE11 이상 최신브라우저 지원.

일부 구형 브라우저 경우, 브라우저 접두어 추가시 가능.

 

 

flex-direction 구문

 

flex-direction: row|row-reverse|column|column-reverse|initial|inherit; 

 


[속성값]

 

row

(가로축 방향 + 아이템 순차 + 왼쪽 정렬) (기본값)

 

row-reverse

(가로축 방향 + 아이템 역순 + 오른쪽 정렬)

 

column 

(세로축 방향 + 아이템 순차 + 상단 정렬)

 

column-reverse

(세로축 방향 + 아이템 역순 + 하단 정렬)

 

initial

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

 

inherit

부모요소의 속성값 상속.

 

PS. 위 예제에서 핑크색 속성값을 바꿔가며 확인 !!

 

PS.

 

flex-direction:column-reverse

세로축 기준 + 끝단 배치 + 아이템 역순

vs

flex-direction:column; justify-content:flex-end

세로축 기준 + 끝단 배치 + 아이템 순차

 

 

PS.

 

mdn flex-direction 강의

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

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

 


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

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