목차
flex-basis 예제 - 아이템 초기 길이
flex-basis 정의
flex-basis 구문
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 (한국어)
주소 복사
랜덤 이동