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

[flex] CSS - flex-flow 속성(C) ☆ - (flex-direction / flex-wrap) 속성 일괄 정의 = flex-flow속성 = 플렉스플로속성, (IE11) ※ 플렉스 컨테이너용 속성

flex-flow 예제

 

<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-directionflex-wrap) 속성을 한번에 정의.

 


 

1.

요소가 플렉서아이템(flexible item : 유연한항목) 아닌 경우, 적용 안 됨.

 

2.

기본값 : row nowrap

상속여부 : X

애니효과 : X

CSS버전 : CSS3

JS 구문 : object.style.flexFlow="column nowrap";

 

3.

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

 

 

 

flex-flow 구문

 

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

부모요소 속성값 상속.

 

 

PS.

 

mdn flex-flow 강의 

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

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

 


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

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