[flex] CSS - flex-grow 속성(I) ★ - 아이템 너비 증가 (= flex-grow속성 = 플렉스그로속성, IE11) ※ 플렉스 아이템용 속성

1. flex-grow 예제 - 아이템 너비 증가
2. flex-grow 정의
3. flex-grow 구문
4. flex-grow 관련 주소

flex-grow 예제 - 아이템 너비 증가

 

<style>

#hz {

  width: 350px;

  height: 100px;

  border: 1px solid silver;

  display: -webkit-flex; /* Safari */

  display: flex;

}

/* Safari 6.1+ */

#hz div:nth-of-type(1) {-webkit-flex-grow: 1;}

#hz div:nth-of-type(2) {-webkit-flex-grow: 3;}

#hz div:nth-of-type(3) {-webkit-flex-grow: 1;}

#hz div:nth-of-type(4) {-webkit-flex-grow: 1;}

#hz div:nth-of-type(5) {-webkit-flex-grow: 1;}

/* 표준 구문 */

#hz div:nth-of-type(1) {flex-grow: 1;}

#hz div:nth-of-type(2) {flex-grow: 3;}

#hz div:nth-of-type(3) {flex-grow: 1;}

#hz div:nth-of-type(4) {flex-grow: 1;}

#hz div:nth-of-type(5) {flex-grow: 1;}

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

 

결과보기

flex-grow 정의

 

컨테이너 안 나머지 아이템에 비해 얼마나 커질지 지정.

(= 여백 너비를 각 아이템에 어떻게 배분할지를 지정.)

 

---

 

1.

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

 

2.

• 기본값: 0
• 상속여부: X
• 애니효과: O
• CSS버전: CSS3
• JS구문: object.style.flexGrow="5";

 

3.

• IE 11 이상, 주요 최신 브라우저 지원.
• 일부 구형 브라우저는 브라우저접두어 필요.

 

flex-grow 구문

 

selector {flex-grow: number|initial|inherit;}

 

---

[속성값]

 

number

다른 아이템에 비해 얼마나 커질지 지정. (기본값: 0)

 

initial

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

 

inherit

부모요소 속성값 상속.

 

flex-grow 관련 주소

 

mdn flex-grow 강의

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

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