FlexItem Properties - Flexible Box Layout(Flexbox)

예전글 "Flexible Box Layout(Flexbox) - Flex Container Properties" 에서 플렉스 컨테이너의 프로퍼티들에 대해서 알아보았습니다. 이번에는 플렉스 컨테이너 내부의 플렉스 아이템이 가지는 플로퍼티들에 대해서 알아봅니다.

FlexItem의 프로퍼티는 다음의 여섯가지가 있습니다.

1. order

정수를(-,0,+) 값으로 가지며, FlexItem의 순서를 지정할 수 있습니다. FlexItem이 컨테이너에 배치되는 기본 순서는 HTML태그를 추가한 순서가 됩니다. FlexItem의 order 프로퍼티를 사용하면 임의로 순서를 바꿀 수 있습니다. 주의해야 할것은 order는 보이는 순서에만 영향을 주지 탭순서등에는 영향이 없습니다.

2. flex-grow

0이상의 실수를 사용하여 너비의 비율을 지정할 수 있습니다. 두 개의 아이템이 1이고, 하나가 2라면 flex-grow가 2인 아이템의 너비가 1인 아이템의 두 배가 됩니다.

3. flex-shrink

FlexItem 이 컨테이너보다 클때 크기를 컨테이너 내부에 들어오도록 축소합니다. 0이상의 실수를 사용합니다. 0이 사용되면 원래크기를 가지게 됩니다.

4. flex-basis

FlexItem의 너비를 지정합니다. 기본값을 auto 이고, px, pt, em등과 % 값을 사용할 수 있습니다. 음수는 사용할 수 없습니다.

5. flex

flex-grow, flex-shrink, flex-basis 속성의 축약형입니다. 기본값은 0 1 auto입니다.

6. align-self

컨테이너의  alien-items 프로퍼티를 오버라이드 합니다.

- auto : 컨테이너의 align-items 값을 따릅니다.

- center : 교차축의 가운데 정렬합니다.

- flex-start : 교차축의 시작점에 위치합니다.

- flext_end : 차축의 끝에 위치합니다.

- baseline : 컨테이너의 베이스라인에 위치합니다.

- stretch : 교차축을 채웁니다.