[CSS] 플렉스 박스(Flexbox)와 아이템 속성 살펴보기

플렉스 박스(Flexbox)는 웹 레이아웃을 구성하는 데 유용한 강력한 도구입니다. 이를 통해 요소들을 유연하게 정렬하고 배치할 수 있으며, 다양한 디바이스와 화면 크기에 대응하여 일관된 레이아웃을 제공할 수 있습니다. 이번 글에서는 플렉스 컨테이너와 아이템을 제어하는 주요 속성에 대해 살펴보겠습니다.

Flex Container

display:flex;로 설정하면 해당 요소가 플렉스 컨테이너로 작동합니다. 이는 그 안에 있는 아이템들을 플렉스 아이템으로 만듭니다.

플렉스 아이템들의 배치 및 정렬을 제어하는 각 속성들에 대해 간단히 알아보겠습니다.

 

flex-direction

플렉스 아이템의 배치 방향을 결정합니다. 주요 값으로는 row(가로 방향), row-reverse(가로, 반대 방향), column(세로 방향), column-reverse(세로, 반대 방향)가 있습니다.

 

flex-wrap

플렉스 아이템이 한 줄에 모두 배치되는지 또는 여러 줄에 걸쳐 나눠지는지를 설정합니다. 주요 값으로는 nowrap(한 줄), wrap(줄 바꿈), wrap-reverse(줄 바꿈, 반대 방향)가 있습니다.

 

flex-flow

flex-flow는 flex-direction과 flex-wrap의 단축 속성입니다. 

 

.container {
    display: flex;
    flex-flow: row wrap;
}

 

따라서, flex-flow: row wrap; 는 flex-direction은 row(가로 방향), flex-wrap은 wrap(줄 바꿈)으로 설정됩니다.

 

justify-content

플렉스 아이템을 가로로 정렬하는 방법을 결정합니다. 주요 값으로는 flex-start, flex-end, center, space-between, space-around, space-evenly가 있습니다.

align-items

플렉스 아이템을 세로로 정렬하는 방법을 결정합니다. 주요 값으로는 stretch, flex-start, flex-end, center, baseline이 있습니다.

 

align-content

여러 줄 사이의 간격을 조절하고 플렉스 컨테이너 안에서의 정렬, 즉 여러 줄 사이의 정렬을 결정합니다. 주요 값으로는 flex-start, flex-end, center, space-between, space-around, space-evenly, stretch가 있습니다.

 

반응형

 

 

Flex Item

플렉스 아이템 속성은 플렉스 컨테이너 내의 개별 아이템들의 동작을 제어하는 데 사용됩니다. 각 속성에 대해 간단히 알아보겠습니다.

 

order

order 속성은 아이템들의 순서를 변경할 수 있습니다. 기본적으로 모든 아이템의 order값은 0이며, 이 값을 변경하여 아이템의 순서를 조정할 수 있습니다. 음수 값도 설정할 수 있습니다.

 

flex-grow

플렉스 아이템이 남은 공간을 차지하는 비율을 설정합니다. 기본값은 0, 이 값이 클수록 해당 아이템이 플렉스 컨테이너의 남은 공간을 많이 차지합니다.

예를 들어, flex-grow 값이 2인 아이템은 flex-grow 값이 1인 아이템보다 두 배 더 많은 공간을 차지하게 됩니다.

flex-shrink

플렉스 아이템이 축소되는 비율을 설정합니다. 기본값은 1, 만약 플렉스 아이템의 크기가 플렉스 컨테이너보다 크다면, 이 속성을 사용하여 해당 아이템이 얼마나 축소될지 결정할 수 있습니다. 이 값이 0이면 아이템은 축소되지 않고, 1보다 큰 값이면 다른 아이템보다 더 많이 축소됩니다.

flex-basis

플렉스 아이템의 기본 크기를 설정합니다. 기본값은 auto, 이 값은 플렉스 아이템이 플렉스 컨테이너 내에서 차지하는 공간의 초기 크기를 결정합니다.

 

 

이전 포스팅에서는 flex-basis를 이용하여 플렉스 아이템의 초기 크기를 제어하는 방법에 대해 다뤘습니다.

자세한 내용이 궁금하시다면 아래의 링크를 클릭하세요.

 

[CSS] Flexbox 크기 제어 전략 : flex-basis, flex-grow, flex-shrink, width, max-width, min-width

flex

flex 속성은 flex-grow, flex-shrink, flex-basis 속성들을 단축하여 표현하는 속성입니다.

.item {
	flex: 1;
    /*
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    */
}

 

flex: 1; 은 flex-grow: 1;, flex-shrink: 1;, flex-basis: 0;의 축약 표현입니다. 이것은 각각의 아이템이 컨테이너의 남은 공간을 모두 차지할 수 있고, 축소가 가능하며, 아이템의 초기 크기를 설정하지 않는 것을 의미합니다.

align-self

개별 플렉스 아이템의 정렬을 설정합니다. 이 값은 align-items 속성보다 우선하여 개별 아이템의 정렬을 결정합니다.

 

 

 

 

 

이러한 속성들을 이용하여 다양한 레이아웃을 손쉽게 구성할 수 있으며, 반응형 디자인과 모바일 친화적인 레이아웃을 구현하는 데 큰 도움이 됩니다. 플렉스박스를 활용하여 웹 페이지의 사용자 경험을 향상하고, 보다 유연하고 동적인 인터페이스를 제공하는 것이 중요합니다.

 

 

[firebase] 구글 Firebase로 무료 웹호스팅하는 방법에 대해서 알아보자

[git] Github Desktop으로 아주 쉽게 저장소(repository)를 로컬에 클론(clone)하기

[CSS] 스크롤바(scrollbar) 스타일 제거하는 방법

[AI] 빙챗(Bing Chat)/코파일럿(Copilot) 설치 방법 및 간단 사용법

[Safari] 사파리 브라우저에서 모바일 모드로 보려면?