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

1. flex-basis 예제 - 아이템 초기 길이
2. flex-basis 정의
3. flex-basis 구문
4. flex-basis 관련 주소

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 구문

 

selector {flex-basis: number|auto|initial|inherit;}

 

---

[속성값]

 

number

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

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

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

 

auto

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

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

 

initial

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

 

inherit

부모요소의 속성값 상속.

 

flex-basis 관련 주소

 

mdn flex-basis 강의

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

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