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

[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 (한국어)

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

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