CSS에서 플렉스박스를 위한 실용 가이드: 플렉스-그로우를 올바르게 사용하기

이 가이드에서는 플렉스 컨테이너에서 플렉스 요소의 성장을 제어하기 위해 CSS 속성 flex-grow를 사용하는 방법을 알아봅니다. 플렉스박스는 요소를 동적으로 반응형으로 정렬할 수 있는 강력한 레이아웃 기술입니다. flex-grow를 사용하면 추가 공간이 있는 경우 컨테이너에서 요소가 차지할 공간을 정의할 수 있습니다.

주요 결과

• flex-grow는 다른 요소와 비교하여 요소가 커지는 비율을 결정합니다.
• flex-grow의 값이 0이면 요소가 커지지 않고 정의된 기본 크기만 차지합니다.
• 플렉스-그로우 값이 같은 모든 요소는 균등하게 성장합니다.
• 총 공간은 플렉스-그로우 값의 합계에 따라 배분됩니다.

단계별 지침

개념을 명확히 하기 위해 플렉스-그로우 속성을 효과적으로 사용할 수 있는 몇 가지 단계를 살펴보겠습니다.

1단계: 준비하기

먼저 플렉스 컨테이너를 만들고 몇 가지 플렉스 항목을 정의해야 합니다. 모든 항목에 대해 고정된 플렉스 기준을 설정합니다. 다음 예제에서는 각 요소의 플렉스 기준을 100픽셀로 설정하고 세로 배열(기둥)을 선택합니다.

2단계: 플렉스-그로우를 0으로 설정

다음으로 모든 요소의 플렉스 성장 속성을 0으로 설정합니다. 이는 요소의 높이가 증가하지 않고 각 요소가 100픽셀 높이로 유지됨을 의미합니다.

3단계: 메인 요소의 플렉스-그로우 조정하기

이제 메인 요소의 플렉스-그로우 값을 변경할 차례입니다. 기본 요소의 플렉스-그로우를 1로 설정하고 다른 두 요소는 플렉스-그로우를 0으로 유지합니다. 결과적으로 메인 요소가 컨테이너의 사용 가능한 공간을 차지하게 됩니다.

4단계: 다른 요소에 플렉스 그로우 적용하기

플렉스-그로우 속성을 다른 요소에도 적용할 수 있습니다. 예를 들어 바닥글 요소에 대해서도 플렉스-그로우를 1로 설정합니다. 갑자기 전체 레이아웃이 동일한 공간 증가로 동적으로 조정됩니다.

5단계: 모든 요소의 균일한 성장

모든 항목이 균등하게 성장하도록 하려면 모두에 대한 플렉스 성장을 1로 설정합니다. 그러면 모든 요소가 균등하게 성장하여 사용 가능한 공간을 채우게 됩니다. 이 기능은 균일한 레이아웃이 필요한 경우에 특히 유용합니다.

6단계: 플렉스 베이스 사용자 지정

다른 플렉스 기준 값을 사용할 수도 있습니다. 예를 들어 내비게이션 요소에 50픽셀의 플렉스 베이스를 설정합니다. 이 경우 탐색 요소는 더 작아지지만 남은 공간에 따라 계속 커집니다.

7단계: 추가 공간 관리

여러 요소의 기본값을 변경하면 성장 비율이 어떻게 변하는지 확인할 수 있습니다. 기본 크기가 다른 경우 기본 크기가 더 작은 요소가 여유 공간에서 차지하는 비율이 달라집니다.

8단계: 플렉스 성장 가변 조정

요소의 성장을 추가로 제어하려면 일부 요소에 대해 플렉스 성장을 2로 설정하고 다른 요소에는 1 값을 설정할 수 있습니다. 이렇게 하면 값이 더 높은 요소에 다른 요소에 비해 더 많은 공간이 제공됩니다.

9단계: 컨테이너 크기 조정

컨테이너의 높이를 변경하여 동작을 테스트합니다. 예를 들어 높이를 400픽셀로 줄이면 요소의 분포가 그에 따라 더 적은 공간을 갖게 됩니다. 레이아웃이 어떻게 동적으로 반응하는지 확인할 수 있습니다.

10단계: 플렉스 그로우와 플렉스 축소 결합하기

플렉스 그로우와 플렉스 수축은 서로 상호 작용한다는 점에 유의하세요. 플렉스-그로우는 추가되는 공간의 양을 결정하지만, 플렉스-축소는 사용 가능한 공간이 적을 때 발생하는 상황을 제어합니다. 이 개념은 반응형 디자인을 만드는 데 중요합니다.

요약

이 가이드에서는 CSS에서 플렉스 요소의 성장을 제어하기 위해 플렉스 성장 속성을 사용하는 방법을 배웠습니다. 이제 플렉스-그로우가 플렉스 컨테이너의 사용 가능한 공간 분포에 영향을 미치고 이러한 설정을 사용하여 동적이고 반응형 레이아웃을 만드는 방법을 알게 되었습니다.