CSS의 플렉스박스: 플렉스 베이스와 플렉스 방향의 의미 이해하기

플렉스박스는 유연하고 반응이 빠른 레이아웃을 만들 수 있는 CSS의 강력한 레이아웃 모듈입니다. 이 튜토리얼에서는 플렉스 방향에서 요소의 기본 크기를 정의하는 플렉스 기준 속성에 중점을 두겠습니다. 플렉스 컨테이너의 특정 치수와 관계없이 자식 요소의 크기를 지정하는 것이 중요합니다. 플렉스 베이스를 올바르게 사용하면 레이아웃 디자인을 상당히 단순화하고 최적화할 수 있습니다.

주요 결과

• flex-basis는 플렉스 컨테이너 방향으로 요소의 초기 크기를 정의합니다.
• 기본적으로 플렉스 기준의 값은 0%이며, 이는 요소가 콘텐츠에 필요한 공간만 차지한다는 의미입니다.
• 플렉스-그로우 및 플렉스-축소를 사용하면 사용 가능한 공간에 따라 요소의 크기를 조정할 수 있습니다.
• 플렉스 방향은 기본 크기의 해석에 영향을 줍니다.

단계별 지침

먼저 플렉스 레이아웃에서 플렉스 베이스가 어떻게 작동하는지 살펴봅시다. 간단한 예제부터 시작하겠습니다. 요소로 플렉스 컨테이너를 설정했는지 확인하세요.

먼저 플렉스 컨테이너를 정의합니다. 이 예제에서는 컨테이너에 display: flex 및 flex-direction: row를 설정했습니다. 이렇게 하면 하위 요소를 서로 나란히 가로로 정렬할 수 있습니다.

다음으로 할 일은 컨테이너 내에서 요소를 선택하고 플렉스 속성을 적용하는 것입니다. 여기서는 플렉스-그로우, 플렉스-축소, 플렉스-베이스의 조합인 플렉스: 1을 사용합니다. 개별 컴포넌트를 살펴봅시다.

flex: 1을 사용하면 기본 기본 크기가 0%로 설정된 상태에서 요소의 크기가 플렉스됩니다. 즉, 콘텐츠에 필요한 공간만 차지하게 됩니다.

이제 플렉스 기준 속성을 자세히 살펴보겠습니다. 예를 들어 플렉스에서 플렉스 기준: 100px로 변경하여 직접 지정할 수 있습니다. 이렇게 하면 요소의 초기 너비가 100픽셀로 설정됩니다.

변경 사항을 저장하면 이제 기본 요소의 너비가 100픽셀이 된 것을 확인할 수 있습니다. 이 100픽셀은 브라우저 레이아웃의 기준이 되는 기본 너비입니다.

즉, 플렉스-그로우를 사용하면 요소가 더 많은 공간을 차지하거나 플렉스-축소가 활성화되면 더 적은 공간을 차지할 수 있습니다.

또는 백분율을 지정할 수도 있습니다. 값을 flex-basis: 100%로 변경하면 요소가 컨테이너에서 사용 가능한 전체 공간을 차지해야 한다는 의미입니다.

이제 플렉스 기준을 0으로 설정하면 요소가 콘텐츠에 지정된 너비로 축소되는 것을 볼 수 있습니다. 0은 요소의 너비가 없다는 뜻이 아니라 최소 콘텐츠만을 기준으로 한다는 점에 유의하세요.

플렉스 기준에 일반적으로 사용되는 값은 자동입니다. 이 값을 설정하면 콘텐츠에 따라 너비가 달라지므로 레이아웃이 매우 유연해집니다. 너비를 200px로 명시적으로 설정하고 요소가 200픽셀을 차지하는 방식을 확인해보세요.

플렉스 방향을 변경할 수도 있습니다. 플렉스 방향을 열로 설정합니다. 이렇게 하면 기본 크기가 해석되는 방식이 변경되어 이제 기본 크기가 세로 방향으로 적용됩니다.

따라서 이제 플렉스 기준을 변경하면 요소의 높이를 조정해야 합니다. 플렉스 기준을 100픽셀로 설정하면 요소의 높이가 100픽셀이 되며 콘텐츠에 따라 유연하게 크기를 조정할 수 있습니다.

너비와 높이는 고정되어 있지만 플렉스 베이스는 플렉스 방향에 따라 변경되므로 이를 이해하는 것이 중요합니다. 따라서 플렉스박스는 기존 레이아웃 방식에 비해 훨씬 더 유연합니다.

또한 다음 단계는 플렉스-베이스와 함께 플렉스-그로우 및 플렉스-축소의 의미를 설명하는 것입니다. 이 값은 요소의 크기와 사용 가능한 리소스에 따라 요소가 컨테이너에서 차지하는 공간을 정의합니다.

요약

이 가이드에서는 플렉스 기준 프로퍼티의 기본 사항을 배웠습니다. 이제 이 속성을 사용하여 요소의 기본 크기를 정의하는 방법과 플렉스 방향이 레이아웃 디스플레이에 어떤 영향을 미치는지 알게 되었습니다. 이 지식을 바탕으로 다양한 화면 크기와 콘텐츠에 유연하게 적응하는 고급 플렉스박스 레이아웃을 만들 준비가 되었습니다.