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

[flex] CSS - flex 속성(I) ☆ - flex-grow, flex-shrink, flex-basis 속성 일괄 정의 (= flex속성 = 플렉스속성, IE11) ※ 플렉스 아이템용 속성

flex 예제

 

<style> 

#hz {

  width: 400px;

  height: 300px;

  border: 1px solid black;

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

  display: flex;

}


#hz div {

  -webkit-flex: 1;  /* Safari 6.1+ */

  -ms-flex: 1;  /* IE 10 */  

  flex: 1;

}

</style>


<div id="hz">

  <div style="background:red;">홈짱닷컴</div>

  <div style="background:blue;">Homzzang.com</div>  

  <div style="background:green;">2012</div>

</div>

 

결과보기

 

flex 정의

 
flex-grow, flex-shrnk, flex-basis 속성을 일괄 정의.

 


 

1.

아래 속성들의 단축속성.

flex-grow 속성 : 컨테이너 너비 늘어날 때 아이템 너비 비율 설정.

flex-shrink 속성 : 컨테이너 너비 줄어들 때, 아이템 너비 비율 설정.

flex-basis 속성 : 아이템 초기 길이.

주의: flex-basis 원래 기본값은 auto이나, flex 단축 속성에선 기본값이 0으로 바뀜.

 

2.

플렉스 아이템에 대해서 유연한 길이 설정.

플렉스 아이템이 아니면 flex 효과 안 생김.

 

3.

기본값 : 0 1 auto

상속여부 : X

애니효과 : O

CSS버전 : CSS3

JS구문 : object.style.flex="1";

 

4.

IE11 이상 최신 브라우저 지원.
IE10 경우, -ms- 접두어 필요.
일부 구형브라우저 경우 접두어 추가 시 가능.

 

 

flex 구문

 

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

 


[속성값]

 

flex-grow

컨테이너 너비가 늘어날 때 아이템 너비 비율 설정.

 

flex-shrink

컨테이너 너비가 줄어들 때 아이템 너비 비율 설정.

 

flex-basis

아이템 길이.

가능한 값 : "auto", "inherit", 숫자 다음에 "%", "px", "em"또는 기타 길이 단위

 

auto

(= 1 1 auto) 의미.

 

none

(= 0 0 auto) 의미.

 

initial

이 속성의 기본값으로 설정. 즉, (= 0 0 auto) 의미.

 

inherit

부모요소 속성값 상속

 

 

PS.

 

mdn flex 강의

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

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

 

 

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

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