CSS 참조 가이드

CSS @규칙(RULES)

flex CSS 속성은 변형 길이의 구성 요소를 지정합니다. 그것은 동시에 설정하기 위해 사용됩니다.flex-grow，flex-shrink와flex-basis속성의 줄임말 속성

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

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

flex:　[　flex-grow　flex-shrink　flex-basis　]　|　none　|　auto　|　initial　|　inherit

아래 예제는 flex 속성을 사용하는 방법을 보여줍니다.

예제

.flex-container　{
　　　　-webkit-flex:　1;　/*　Safari　6。1+　*/
　　　　　　　　-ms-flex:　1;　/*　IE　10　*/
　　　　　　　　　　　　flex:　1;　
}

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

값	설명
flex-grow	에라스티시 요소의 확장 증가 계수 또는 긍정 확장을 지정합니다.
flex-shrink	에라스티시 요소의 확장 축소 계수 또는 부정 확장을 지정합니다.
flex-basis	에라스티시 요소의 초기 크기를 지정합니다.
none	flex를 0 0 auto로 설정하는等效
auto	flex를 설정하는等效1 1 auto。
initial	이 속성을 기본 값으로 설정합니다.
inherit	지정된 경우, 관련 요소는 부모 요소의 flex 속성 값을 사용합니다.

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

	Firefox 18+ ^-moz-，28 Google Chrome 21+ ^-webkit-，29 Internet Explorer 10+ ^-ms-，11 Apple Safari 6。1+ ^-webkit- 오페라 12。1+

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