[CSS] flex

flex

flex 속성은 콘텐츠의 성질을 flex로 정의합니다.

---

flex

flex 속성은 콘텐츠의 성질을 flex로 정의합니다.

특징	설명
기본 값	flex-grow : 0 flex-shrink : 1 flex-basis : auto
적용	flex
버전	CSS3

정의(Definition)

• flex 속성은 콘텐츠의 성질을 flex로 정의합니다.

문법(Syntax)

flex : flex-grow | flex-shrink | flex-basis | auto

/* 단위가 없는 속성을 한 개만 사용한 경우 : flex-grow 표현 */
flex: 2;

/* 단위가 있는 속성을 한 개만 사용한 경우 : flex-basis 표현 */
flex: 100px;

/* 단위가 없는 속성을 두 개 사용한 경우 : flex-grow | flex-shrink 표현 */
flex: 2 2;

/* 단위가 있는 속성을 두 개 사용한 경우 : flex-grow / flex-basis 표현 */
flex: 2 100px;

/* 속성을 세 개 사용한 경우 : flex-grow | flex-shrink | flex-basis 표현 */
flex: 2 2 100px;

속성(Property)

속성값	설명
flex-grow	플렉스 요소의 크기를 늘려줍니다.
flex-shrink	플렉스 요소의 크기를 수축시킵니다.
flex-basis	플렉스 요소의 기본 단위를 정의합니다.
auto	플렉스 요소의 크기를 자동으로 설정합니다.

호환성(Compatibility)

						6	7	8	9	10	11
flex	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨	사용안됨	사용안됨	사용안됨	사용가능	사용가능	사용가능	사용가능
flex-grow	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨	사용안됨	사용안됨	사용안됨	사용가능	사용가능	사용가능	사용가능
flex-shrink	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨	사용안됨	사용안됨	사용안됨	사용가능	사용가능	사용가능	사용가능
auto	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨	사용안됨	사용안됨	사용안됨	사용가능	사용가능	사용가능	사용가능

---