CSS flexbox – 플렉스 레이아웃 구조 이해

정의 및 사용 방법

일반적으로 flexbox(플렉스박스)라고 알려진 CSS Flexible Box Layout Module은 컨테이너 안의 요소들을 가로 또는 세로 방향으로 유연하게 배치하고 정렬할 수 있는 레이아웃 모델입니다.

Flexbox(플렉스박스)를 '플렉스 레이아웃'이라고도 부릅니다.

flexbox는 일반적인 '블록 레이아웃'보다 다양한 레이아웃을 유연하고 편리하게 구현할 수 있습니다.

특징

컨테이너 안의 요소를 가로 또는 세로 방향으로 배치할 수 있습니다.
- 심지어 요소의 배치 순서도 유연하게 지정할 수 있습니다.
- 단, Flexbox에서는 한 번에 하나의 방향(가로 또는 세로)만 다룰 수 있습니다. 이것은 Grid 레이아웃과 flexbox의 가장 큰 차이점입니다.
컨테이너 안의 요소 크기를 유연하게 조정할 수 있습니다.
- 사용되지 않는 컨테이너 공간을 채우기 위해 요소의 크기가 자동으로 커지게 하거나,
- 컨테이너를 넘치지 않도록 크기가 자동으로 축소되도록 지정할 수 있습니다.
컨테이너 안의 요소를 가로와 세로 방향으로 간단히 정렬시킬 수 있습니다.

눈으로 보는 flexbox 특징

다양한 레이아웃을 유연하고 편리하게 구현할 수 있는 flexbox의 특징을 눈으로 직접 확인하며 예제로 이해하는 것이 중요합니다.

요소를 가로 또는 세로 방향으로 배치하기

flexbox는 컨테이너 안의 요소를 가로 또는 세로 방향으로 배치할 수 있습니다.

요소의 배치 순서를 유연하게 지정

flexbox는 컨테이너 안의 요소 배치 순서를 유연하게 지정할 수 있습니다.

요소 크기를 유연하게 조정

flexbox는 컨테이너 안의 요소 크기를 유연하게 조정할 수 있습니다.

요소를 가로와 세로 방향으로 간단히 정렬

flexbox는 컨테이너 안의 요소들을 가로 세로 방향으로 간단히 정렬시킬 수 있습니다.

flexbox 만들기

flexbox를 만들려면, 원하는 컨테이너에 display: flex 또는 display: inline-flex를 설정하면 됩니다.
이렇게 설정한 컨테이너는 flexbox를 구현하는 컨테이너가 되는데, 이렇게 flexbox가 구현되는 컨테이너를 플렉스 컨테이너라고 합니다.

플렉스 컨테이너 내부에서는 지금까지 살펴봤던 자식 요소들이 flexbox로 생성된 레이아웃으로 유연하고 편리하게 배치하거나 정렬할 수 있는데, 플렉스 컨테이너의 자식 요소를 플렉스 아이템이라고 합니다.

CSS에는 flexbox로 생성된 레이아웃을 설정하는 다양한 속성들이 있습니다.
플렉스 컨테이너에 설정하는 속성들도 있고, 플렉스 아이템에 설정하는 속성들도 있습니다.

플렉스 컨테이너(Flex Container)

플렉스 컨테이너는 플렉스 박스 레이아웃 모듈(CSS Flexible Box Layout Module)을 사용해 콘텐츠인 플렉스 아이템에 대해 새로운 플렉스 레이아웃 규칙(flex formatting context)을 설정하는데, 이는 일반적인 블록 컨테이너를 설정하는 것과 동일하지만, 블록 레이아웃 대신 '플렉스 레이아웃'이 사용됩니다.

플렉스 컨테이너에는 '플렉스 흐름 방향'을 제어하고, 플렉스 아이템을 어떻게 배치하고 정렬할지 지정할 수 있는 다양한 속성들이 있습니다.

플렉스 컨테이너에 적용 가능한 레이아웃 관련 속성
`flex-direction`	주축(main axis)의 방향을 설정합니다.
`flex-wrap`	플렉스 컨테이너의 줄바꿈 허용 설정을 설정합니다.
`gap`	플렉스 아이템 간격을 설정합니다.
`justify-content`	주축을 기준으로 플렉스 아이템의 정렬 방식 설정합니다.
`align-items`	교차축(cross axis)을 기준으로 플렉스 아이템의 정렬 방식 설정합니다.
`align-content`	여러 줄일 때 교차축 정렬 방식을 설정합니다.

플렉스 아이템(Flex Item)

플렉스 컨테이너의 자식인 플렉스 아이템의 레이아웃 설정은 다음과 같은 속성이 있습니다.

이 속성들은 개별적인 '플렉스 아이템'에 직접 지정하여 각각의 동작이나 크기를 제어하며, 다음과 같은 속성들이 있습니다.

'플렉스 아이템'에 지정하는 다양한 속성들
`align-self`	해당 플렉스 아이템만 교차축에서 정렬 방식을 재정의합니다.
`flex-basis`	플렉스 아이템의 크기를 계산할 때 사용하는 주축 방향의 기준(basis) 크기를 지정합니다.
`flex-grow`	플렉스 컨테이너(부모)의 남는 공간을 플렉스 아이템들이 나누어 커질 때, 해당 플렉스 아이템이 다른 플렉스 아이템에 비해 상대적으로 얼마나 커질지 결정하는 비율을 설정합니다.
`flex-shrink`	플렉스 컨테이너(부모)의 부족한 공간을 플렉스 아이템들이 나누어 축소시킬 때, 해당 플렉스 아이템이 다른 플렉스 아이템에 비해 상대적으로 얼마나 축소될지 결정하는 비율을 설정합니다.
`order`	플렉스 아이템의 배치 순서를 변경합니다.

예제

다음은 일반적인 문서 흐름에서 display: flex를 사용하여 flexbox를 생성한 간단한 예제입니다.

HTML

<div class="flex-container">
    <div class="flex-item">child 1</div>
    <div class="flex-item">child 2</div>
    <div class="flex-item">child 3</div>
</div>

CSS

.flex-container {
    display: flex; /* 플렉스 컨테이너 생성 */
    border: 2px solid #333;
    padding: 10px;
    gap: 10px; /* 플렉스 아이템 간격 설정 */
    justify-content: center; /* 플렉스 아이템들을 수평 중앙 정렬 */
}
.flex-item { /* 플렉스 아이템 */
    background-color: #4CAF50;
    color: white;
    padding: 10px;
}