플렉서블 박스 레이아웃: CSS로 유연한 레이아웃 만들기

플렉서블 박스 레이아웃(Flexible Box Layout), 흔히 플렉스박스라고 불리는 이 CSS 레이아웃 모델은 웹 디자인에서 매우 중요한 역할을 합니다. 플렉스박스를 활용하면 다양한 화면 크기와 장치에 맞춰 유연하고 반응적인 레이아웃을 쉽게 구현할 수 있습니다. 이번 포스트에서는 플렉스박스의 기본 개념과 주요 속성에 대해 자세히 알아보겠습니다.

플렉스박스의 기본 개념

플렉스박스는 컨테이너 내의 아이템들을 효율적으로 배치할 수 있도록 설계된 CSS 레이아웃 모델입니다. display: flex;를 사용하여 컨테이너를 설정하면, 그 안의 모든 직접 자식 요소가 플렉스 아이템으로 변환됩니다. 이를 통해 아이템 간의 공간 할당 및 정렬을 쉽게 조정할 수 있습니다.

플렉스 아이템 속성 개요

플렉스 아이템의 동작과 외관을 제어하는 데 필수적인 네 가지 속성이 있습니다:

1. flex-grow
2. flex-shrink
3. flex-basis
4. align-self

이 속성들은 각각 아이템 간의 공간 할당 방식을 결정하는 데 중요한 역할을 합니다.

---

1. flex-grow

정의: flex-grow 속성은 플렉스 아이템이 여유 공간이 있을 때 얼마나 성장할 수 있는지를 정의합니다.

• 값 유형: 숫자 (기본값은 0)
• 예시:

.container {
    display: flex;
}

.item {
    background-color: lightblue;
    margin: 10px;
}

.item1 {
    flex-grow: 1; /* 이 아이템은 더 많은 공간을 차지합니다 */
}

.item2 {
    flex-grow: 2; /* 이 아이템은 item1의 두 배만큼 공간을 차지합니다 */
}

위의 예시에서, .container에 여유가 있는 수평 공간이 있다면, .item2는 .item1에 비해 두 배의 너비를 차지하게 됩니다. 이를 통해 다양한 크기의 아이템을 균형 있게 배치할 수 있습니다.

---

2. flex-shrink

정의: flex-shrink 속성은 컨테이너 내에 공간이 부족할 때 아이템이 얼마나 줄어들어야 하는지를 지정합니다.

• 값 유형: 숫자 (기본값은 1)
• 예시:

.container {
    display: flex;
}

.item {
    background-color: lightcoral;
    margin: 10px;
}

.item1 {
    width: 200px;
    flex-shrink: 0; /* 줄어들지 않음 */
}

.item2 {
    width: 100px;
}

이 경우, 총 너비가 .container의 너비를 초과하면, .item1은 flex-shrink가 0으로 설정되어 있기 때문에 줄어들지 않고, 오직 .item2만 줄어들게 됩니다. 이를 통해 특정 아이템의 크기를 고정할 수 있습니다.

---

728x90

3. flex-basis

정의: flex-basis 속성은 남은 공간이 성장 및 축소 요소에 따라 분배되기 전에 요소의 기본 크기를 정의합니다.

• 값 유형: 길이 (예: px, %, em) 또는 auto
• 예시:

.container {
   display: flex;
}

.item {
   background-color: lightgreen;
   margin: 10px;
}

.item1 {
   flex-basis: 150px; /* 이 크기로 시작합니다 */
}

.item2 {
   flex-basis: auto; /* 내용에 따라 크기 결정 */
}

여기서, 여유 공간이 얼마나 존재하든 상관없이, .item1은 150px에서 시작하고, .item2는 자신의 내용에 따라 크기를 결정합니다. 이 속성을 통해 아이템의 기본 크기를 설정하여 레이아웃을 더욱 세밀하게 조정할 수 있습니다.

---

4. align-self

정의: align-self 속성은 개별 아이템이 교차 축(수직 방향)에서 부모의 align-items 속성에 의해 설정된 기본 정렬을 무시하도록 합니다.

• 값 옵션: auto | stretch | center | start | end
• 예시:

.container {
   display:flex; 
   align-items:center; /* 모든 자식 요소의 기본 정렬 */
}

.item { 
   height :50px ; 
} 

.special-item { 
   align-self:end ; /* 이 아이템만 기본 정렬을 무시함 */  
}

이 예시에서, 대부분의 아이템은 부모의 설정(align-items:center)으로 인해 수직으로 중앙에 정렬되지만, .special-item은 자신의 행의 하단에 정렬됩니다. 이를 통해 특정 아이템의 정렬을 개별적으로 조정할 수 있습니다.

---

결론

플렉스박스는 웹 디자인에서 매우 유용한 도구입니다. flex-grow, flex-shrink, flex-basis, align-self와 같은 속성을 이해하고 활용하면, 다양한 화면 크기에 부드럽게 적응하는 유동적인 디자인을 만드는 데 큰 도움이 됩니다. 실제 프로젝트나 코딩 연습에서 이러한 속성의 다양한 값과 조합을 실험해 보세요. 이를 통해 플렉스박스의 진정한 힘을 경험할 수 있을 것입니다!