CSS 참조 가이드

CSS @규칙(RULES)

CSS 속성 전체

CSS3 flex-basis 속성 사용 방법 및 예제

flex-basis CSS 속성이 지정한 초기 기준 값

아래 표는 이 속성의 사용 설명과 버전 이력, 그리고 JavaScript 스크립트에서 이 속성의 사용 문법을 설명합니다.

기본 값:	auto
적용 대상:	활성화 아이템
thừa kế:	아니요
애니메이션 가능:	네.참조: 애니메이션 속성。
버전:	CSS3의 새 기능
JavaScript 문법:	object.style.flexBasis="180px"

flex-basis 사용 문법

이 속성의 문법은 다음과 같습니다:

flex-basis:　width　|　auto　|　initial　|　inherit

아래 예제는 flex를 사용하는 방법을 설명합니다.-basis 속성.

예제

.flex-container　{
　　　　display:　flex;　　　　　　
}　
.item1　{
　　　　background:　#ff80c0;
　　　　-웹킷-flex-basis:　300px;　/*　Safari　6。1+　*/
　　　　flex-basis:　300px;
}
.item2　{
　　　　background:　#8080ff;
　　　　-웹킷-flex-basis:　30%;　/*　Safari　6。1+　*/
　　　　flex-basis:　30%;
}
.item3　{
　　　　width:　120px;
　　　　background:#0080ff;
}

테스트를 보세요‹/›

속성 값

아래 표는 이 속성의 값을 설명합니다.

값	설명
width	절대적이거나 상대적 단위로 표현된 길이. 이는 활성화 요소의 초기 길이를 지정하는 데 사용됩니다. 부정 값은 유효하지 않습니다.
auto	활성화 요소의 너비는 그것의width속성 값. width가 弹性项에 속성으로 지정되지 않았을 경우, 너비는 내용에 따라 결정됩니다. 이는 기본 값입니다.
initial	이 속성을 기본 값으로 설정합니다.
inherit	지정된 경우, 관련 요소는 부모 요소의 flex를 사용합니다.-basis 속성 값.

브라우저 호환성

flex-basis 속성의 브라우저 호환성을 설명합니다. 아래 표의 숫자는 이 속성을 지원하는 브라우저의 최소 버전 번호를 나타냅니다. 모든 주요 브라우저는 이 속성을 지원합니다.

	파이어폭스 18+ ^-moz-，28 Google 크롬 21+ ^-웹킷-，29 인터넷 익스플로러 10+ ^-ms-，11 Apple 사파리 6。1+ ^-웹킷- 오페라 12。1+

추가로 읽어보세요。

다음 튜토리얼을 참조하십시오:CSS3다열 레이아웃。

CSS3 flex-direction 속성 CSS3 flex 속성