(CSS) Flex Item

플렉스 컨테이너 내부의 각 아이템을 개별적으로 제어하는 속성을 정리해보았다.

flex-grow

플렉스 컨테이너 안에서 사용 가능한 공간을 아이템이 얼마나 차지할지 설정한다.

• 기본값은 0으로, 추가 공간을 차지하지 않는다.
• 숫자가 클수록 더 많은 공간을 차지한다. 각각 flex-grow: 1과 flex-grow: 2로 설정되었다면, 두 번째 아이템이 첫 번째 아이템보다 두 배 더 많은 공간을 차지한다.

flex-shrink

플렉스 컨테이너의 공간이 부족할 때, 아이템이 얼마나 축소될지 설정한다.

• 기본값은 1이며, 컨테이너가 부족한 공간을 아이템이 축소하여 채우도록 허용한다.
• 0으로 설정하면 축소되지 않으며, 다른 값은 상대적으로 축소되는 정도를 설정한다.

flex-basis

플렉스 아이템의 기본 크기를 설정한다. 이 값은 width와 height 속성보다 우선 적용된다.

• 기본값은 auto로, 아이템의 원래 크기나 컨텐츠 크기를 기준으로 한다.
• flex-basis 값을 200px로 설정하면, 해당 아이템의 기본 크기는 200px로 설정되며, 나머지는 flex-grow와 flex-shrink에 따라 크기가 조정된다.

flex (축약형 속성)

flex-grow, flex-shrink, flex-basis 속성을 축약해서 작성할 수 있다.

• 예: flex: 1 1 200px;는 flex-grow: 1, flex-shrink: 1, flex-basis: 200px과 동일하다.
• 예: flex: 2;는 flex-grow: 2, flex-shrink: 1, flex-basis: 0과 동일하다.

align-self

플렉스 아이템을 개별적으로 교차 축에서 정렬한다. align-items와 같은 값을 가지며, 이 속성으로 특정 아이템만 별도로 정렬할 수 있다.

• auto (기본값): 부모 컨테이너의 align-items 설정을 따른다.
• flex-start, flex-end, center, baseline, stretch: 각 값은 align-items 속성들과 동일하게 동작한다.