flex 속성 단축 표기법

정리해야지 해야지 하면서 안 하고 있던 flex 단축 표기법 공부를 해봤다.

 

단축 표기되는 속성 목록

CSS의 flex 속성은 플렉스 컨테이너에서 플렉스 아이템의 크기와 분포를 정의하는 단축 속성이다.

이 속성은 다음과 같은 세 가지 구성 요소를 포함한다.

 

• flex-grow: 플렉스 아이템이 컨테이너의 남은 공간을 얼마나 많이 차지할지 결정.
• flex-shrink: 플렉스 아이템이 컨테이너가 줄어들 때 얼마나 줄어들지 결정.
• flex-basis: 플렉스 아이템의 기본 크기를 설정.

아래처럼 표기된다.

flex: [flex-grow] [flex-shrink] [flex-basis];

 

 

 

단축 예시

기본값:

flex: 0 1 auto;

 

 

플렉스 아이템이 남은 모든 공간을 균등하게 차지하게 하려면:

flex: 1;

이는 flex: 1 1 0%; 와 동일하다.

 

 

플렉스 아이템이 성장만 하도록 하려면 (줄어들지 않음):

flex: 1 0 auto;

 

 

플렉스 아이템의 기본 크기를 100픽셀로 설정하고, 남은 공간을 차지하지 않게 하려면:

flex: 0 0 100px;

 

 

 

flex-basis란?

전혀 사용해보지 않은 속성인데, flex아이템의 기본값을 설정한다고 한다.

row 기준에서 width, col 기준으로 height를 명시적으로 선언해주고, flex-basis를 사용 안 할수도 있다.

그러나 width와 height와 flex-basis가 있다면 flex-basis가 우선시된다.