Flex 속성을 활용한 순서변경, 넓이 조절
CSS 24.05.02order
order 속성은 Flex 아이템의 순서를 지정하는 데 사용됩니다. Flex 컨테이너 내의 각 Flex 아이템에 대해 순서를 변경할 수 있습니다.
기본적으로, Flex 아이템의 order 값은 0입니다. 하지만 order 값을 변경하면 해당 아이템이 다른 아이템들보다 앞서거나 뒤쪽에 배치됩니다. 음수 값을 가지는 Flex 아이템은 더 앞으로 이동하고, 양수 값을 가지는 Flex 아이템은 뒤로 밀립니다.
[예제]
See the Pen Untitled by designkits (@designkits) on CodePen.
두 번째 아이템은 order: 1로 설정되어 있으므로 나머지 아이템보다 뒤에 위치합니다. 세 번째 아이템은 기본적으로 order: 0이므로 그대로 두고, 네 번째 아이템은 order: -1로 설정되어 있으므로 다른 아이템들보다 앞에 위치합니다.
Flex 아이템 간의 상대적인 순서를 조정하여 레이아웃을 유연하게 만들 수 있습니다.
flex-grow
이 속성은 플렉스 아이템이 플렉스 컨테이너 내에서 어떻게 확장되는지를 제어합니다.
기본적으로, flex-grow 값은 0입니다. 이는 아이템이 컨테이너 크기에 관계없이 자신의 크기를 유지한다는 것을 의미합니다. 하지만 flex-grow 값을 양수로 설정하면 해당 아이템이 여유 공간을 차지하여 확장됩니다.
[예제]
See the Pen Untitled by designkits (@designkits) on CodePen.
이를 통해 플렉스 아이템 간의 크기 분배를 유연하게 조절할 수 있으며, 반응형 디자인에서 유용하게 활용됩니다.