Antigravity Agent
37 lines
4.3 KiB
Markdown
37 lines
4.3 KiB
Markdown
# [[Flexbox|Flexbox]]
|
|
|
|
## 📌 Brief Summary
|
|
Flexbox(Flexible Box Layout)는 컨테이너 내의 아이템들을 정렬하고 공간을 효율적으로 분배하기 위해 고안된 1차원(row 또는 column) 레이아웃 모듈입니다 [1, 2]. 아이템의 크기가 불분명하거나 동적일 때도 가용 공간에 맞춰 아이템의 너비, 높이, 순서를 유연하게 조정할 수 있어 반응형 웹 디자인을 쉽게 구현할 수 있습니다 [1, 3, 4]. 주로 내비게이션 바, 중앙 정렬 요소 등 소규모 UI 컴포넌트의 정렬과 공간 배분에 탁월한 성능을 발휘합니다 [5-7].
|
|
|
|
## 📖 Core Content
|
|
|
|
**주요 개념 및 축(Axis)**
|
|
* Flexbox 레이아웃은 부모 요소인 'Flex 컨테이너(Flex Container)'와 그 직계 자식 요소인 'Flex 아이템(Flex Items)'으로 구성됩니다 [8, 9].
|
|
* 기존의 블록이나 인라인 레이아웃과 달리 방향성에 구애받지 않으며(direction-agnostic), `flex-direction`에 의해 결정되는 주축(Main axis)과 이에 수직인 교차축(Cross axis)을 기준으로 아이템들이 배치됩니다 [5, 10, 11].
|
|
|
|
**Flex Container (부모 요소) 주요 속성**
|
|
* **`display: flex` / `inline-flex`**: 요소를 Flex 컨테이너로 정의하여 자식 요소들에게 Flex 컨텍스트를 활성화합니다 [9, 12].
|
|
* **`flex-direction`**: 주축을 설정하여 아이템이 배치되는 방향(row, column, row-reverse, column-reverse)을 결정합니다 [11-13].
|
|
* **`flex-wrap`**: 아이템들이 한 줄에 들어가지 않을 때 여러 줄로 바꿈(wrap) 처리할지를 제어하여 반응형 레이아웃을 돕습니다 [13-15].
|
|
* **`justify-content`**: 주축을 따라 여분 공간을 분배하고 아이템을 정렬합니다 (예: `flex-start`, `center`, `space-between`) [16-18].
|
|
* **`align-items` & `align-content`**: `align-items`는 교차축을 기준으로 현재 줄의 아이템들을 정렬하며, `align-content`는 여러 줄로 래핑된 상황에서 여분 공간이 있을 때 줄(lines) 자체를 정렬합니다 [19, 20].
|
|
* **`gap`**: Flex 아이템 사이의 여백(공간)을 명시적으로 제어합니다 [21].
|
|
|
|
**Flex Items (자식 요소) 주요 속성**
|
|
* **`flex-grow` & `flex-shrink`**: 컨테이너 내의 남는 공간을 차지하기 위해 팽창하거나, 공간이 부족할 때 수축하는 비율을 정의합니다 [22, 23].
|
|
* **`flex-basis`**: 남은 공간이 분배되기 전 아이템의 기본 크기를 설정합니다 [23].
|
|
* **`flex`**: `flex-grow`, `flex-shrink`, `flex-basis`를 한 번에 설정하는 단축 속성으로, 개별 속성을 직접 설정하기보다 이 단축 속성의 사용이 권장됩니다 [24, 25].
|
|
* **`order`**: HTML 소스 순서를 변경하지 않고도 시각적으로 나타나는 아이템의 배치 순서를 변경할 수 있어, 반응형 디자인 시 화면 크기에 따른 요소 순서 재배치에 유용합니다 [22, 26].
|
|
|
|
**[[CSS Grid|CSS Grid]]와의 비교 및 실전 설계 전략**
|
|
* Flexbox는 콘텐츠 크기를 기준으로 유연하게 공간을 분배하는 '콘텐츠 위주(content out)'의 1차원 레이아웃에 이상적입니다 [2, 27].
|
|
* 행과 열을 동시에 제어해야 하는 2차원의 복잡한 레이아웃(전체 페이지 구조 등)은 '레이아웃 위주(layout in)'인 CSS Grid를 사용하는 것이 좋습니다 [28-30].
|
|
* 실무 CSS 아키텍처 설계에서는 페이지나 큰 섹션의 주요 뼈대(Major layout)는 CSS Grid로 잡고, 그 안의 내부 컴포넌트 정렬은 Flexbox를 사용하는 등 두 시스템을 함께 결합하여 확장성 높은 레이아웃을 구성하는 것이 가장 효율적입니다 [7, 31].
|
|
|
|
## 🔗 Knowledge Connections
|
|
- **Related Topics:** [[CSS Grid|CSS Grid]], 반응형 디자인 ([[Responsive Web Design|Responsive Web Design]]), CSS 실전 설계
|
|
- **Projects/Contexts:** 웹 애플리케이션 컴포넌트 아키텍처, 모바일 우선(Mobile-First) UI 설계 및 반응형 네비게이션 구현
|
|
- **Contradictions/Notes:** Flexbox는 훌륭한 정렬 도구이지만, 2차원의 복잡한 레이아웃을 Flexbox만으로 구현하려고 하면 Flex 컨테이너를 과도하게 중첩(nesting)해야 하여 HTML 및 CSS 관리가 복잡해지는 단점이 있습니다. 이러한 경우에는 CSS Grid를 사용하는 것이 권장됩니다 [28, 32].
|
|
|
|
---
|
|
*Last updated: 2026-04-26* |