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

1. flex-flow 예제 - (flex-direction / flex-wrap) 속성 일괄 정의
2. flex-flow 정의
3. flex-flow 구문
4. 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 (한국어)