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

[flex] CSS - flex-basis 속성(I) ★ - 아이템 초기 길이 (= flex-basis속성 = 플렉스베이시스속성, IE11) ※ 플렉스 아이템용 속성

flex-basis 예제

 

<style>

#hz {

  width: 300px;

  height: 100px;

  border: 1px solid silver;

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

  display: flex;

}


#hz div {

  -webkit-flex-grow: 0; /* Safari 6.1+ */

  -webkit-flex-shrink: 0; /* Safari 6.1+ */

  -webkit-flex-basis: 50px; /* Safari 6.1+ */

  flex-grow: 0;

  flex-shrink: 0;

  flex-basis: 50px;

}


#hz div:nth-of-type(2) {

  -webkit-flex-basis: 100px; /* Safari 6.1+ */

  flex-basis: 100px;

  color:white;

}

</style>


<div id="hz">

  <div style="background-color:red;">50px</div>

  <div style="background-color:blue;">100px</div>

  <div style="background-color:pink;">50px</div>

  <div style="background-color:green;">50px</div>

  <div style="background-color:violet;">50px</div>

</div>


결과보기

 

 

flex-basis 정의

 

플렉스 아이템의 초기 길이. (기본값: auto)

(단, flex 단축 속성 사용 시, flex-basic 기본값이 0으로 세팅됨.)

 


 

1.

flex-grow 속성 : 컨테이너가 커질 때 아이템 너비 증가 설정.

flex-shrink 속성 : 컨테이너가 작아질 때, 아이템 너비 감소 설정.

 

2.

플렉스 아이템 아닌 경우엔 적용 안 됨.

 

3.

기본값 : auto

상속여부 : X

애니효과 : O

CSS버전 : CSS3

JS구문 : object.style.flexBasis="200px";

 

4.

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

일부 구형 브라우저 경우, 브라우저접두어 추가시 가능.

 

 

 

flex-basis 구문

 

flex-basis: number|auto|initial|inherit;

 


[속성값]

 

number

길이 단위. 또는, % (백분율)

0 : 기본축에서 flex-grow, flex-shrink 설정 비율대로 아이템 너비 배분. (flex 단축 속성 사용 시, 기본값)

(∵ 아이템 너비 0이므로 여백이 100%이고, 여백을 비율대로 나눠 배분.)

 

auto

기본축에서 아이템 차지 공간 제외한 여백을 아이템에 자동으로 골고루 배분. 

※ flex-grow, flex-shrink 될 때, 여백을 따라 변동. (기본값)
※ 아이템 길이 값 없는 경우, 그 안의 내용 길이에 의해 결정.

 

initial

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

 

inherit

부모요소의 속성값 상속.

 

 

 

PS.

 

mdn flex-basis 강의

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

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

 


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

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