c CSS

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

999

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

부모요소의 속성값 상속.