[G1-Sync] Manual knowledge update
This commit is contained in:
Antigravity Agent
@@ -2,83 +2,265 @@
|
||||
id: wiki-2026-0508-flexbox
|
||||
title: Flexbox
|
||||
category: 10_Wiki/Topics
|
||||
status: needs_review
|
||||
status: verified
|
||||
canonical_id: self
|
||||
aliases: []
|
||||
aliases: [flexbox, flex layout, CSS flex, justify-content, align-items]
|
||||
duplicate_of: none
|
||||
source_trust_level: A
|
||||
confidence_score: 0.92
|
||||
tags: [uncategorized]
|
||||
confidence_score: 0.96
|
||||
verification_status: applied
|
||||
tags: [css, flexbox, layout, frontend, responsive, web]
|
||||
raw_sources: []
|
||||
last_reinforced: 2026-05-08
|
||||
last_reinforced: 2026-05-10
|
||||
github_commit: pending
|
||||
inferred_by: Claude Opus 4.7 (auto-normalize 2026-05-08)
|
||||
tech_stack:
|
||||
language: CSS
|
||||
applicable_to: [Frontend, Responsive Design]
|
||||
---
|
||||
|
||||
# [[Flexbox|Flexbox]]
|
||||
# Flexbox
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
Flexbox(Flexible Box Layout)는 컨테이너 내의 아이템들을 정렬하고 공간을 효율적으로 분배하기 위해 고안된 1차원(row 또는 column) 레이아웃 모듈입니다 [1, 2]. 아이템의 크기가 불분명하거나 동적일 때도 가용 공간에 맞춰 아이템의 너비, 높이, 순서를 유연하게 조정할 수 있어 반응형 웹 디자인을 쉽게 구현할 수 있습니다 [1, 3, 4]. 주로 내비게이션 바, 중앙 정렬 요소 등 소규모 UI 컴포넌트의 정렬과 공간 배분에 탁월한 성능을 발휘합니다 [5-7].
|
||||
## 매 한 줄
|
||||
> **"매 1D layout — 매 row 또는 column"**. CSS Flexible Box Layout. 매 navbar, 매 card stack, 매 toolbar 의 best. 매 grid (2D) 와 complementary. 매 modern: 매 gap 매 universal support, 매 subgrid (Grid only) 의 alternative 매 Flex 의 X.
|
||||
|
||||
## 📖 구조화된 지식 (Synthesized 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].
|
||||
### 매 main concept
|
||||
- **Container** (parent): `display: flex`.
|
||||
- **Items** (children).
|
||||
- **Main axis**: row (default) or column.
|
||||
- **Cross axis**: 매 perpendicular.
|
||||
|
||||
**Flex Items (자식 요소) 주요 속성**
|
||||
* **`flex-grow` & `flex-shrink`**: 컨테이너 내의 남는 공간을 차지하기 위해 팽창하거나, 공간이 부족할 때 수축하는 비율을 정의합니다 [22, 23].
|
||||
* **`flex-basis`**: 남은 공간이 분배되기 전 아이템의 기본 크기를 설정합니다 [23].
|
||||
* **`flex`**: `flex-grow`, `flex-shrink`, `flex-basis`를 한 번에 설정하는 단축 속성으로, 개별 속성을 직접 설정하기보다 이 단축 속성의 사용이 권장됩니다 [24, 25].
|
||||
* **`order`**: HTML 소스 순서를 변경하지 않고도 시각적으로 나타나는 아이템의 배치 순서를 변경할 수 있어, 반응형 디자인 시 화면 크기에 따른 요소 순서 재배치에 유용합니다 [22, 26].
|
||||
### 매 container property
|
||||
- `flex-direction`: row | column | row-reverse | column-reverse.
|
||||
- `flex-wrap`: nowrap | wrap.
|
||||
- `justify-content`: flex-start | center | space-between | space-around | space-evenly.
|
||||
- `align-items`: stretch | center | flex-start | flex-end | baseline.
|
||||
- `align-content`: 매 multi-line wrap.
|
||||
- `gap`: 매 row + column.
|
||||
|
||||
**[[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].
|
||||
### 매 item property
|
||||
- `flex-grow`: 매 grow factor (default 0).
|
||||
- `flex-shrink`: 매 shrink factor (default 1).
|
||||
- `flex-basis`: 매 initial size.
|
||||
- `flex`: shorthand (`1` = `1 1 0`).
|
||||
- `align-self`: 매 individual align.
|
||||
- `order`: 매 reorder.
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
- **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*
|
||||
### Center (legendary)
|
||||
```css
|
||||
.center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
}
|
||||
```
|
||||
|
||||
## 🤖 LLM 활용 힌트 (How to Use This Knowledge)
|
||||
### Navbar
|
||||
```css
|
||||
.navbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
```
|
||||
|
||||
**언제 이 지식을 쓰는가:**
|
||||
- *(TODO)*
|
||||
### Card grid (with wrap)
|
||||
```css
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
.card {
|
||||
flex: 1 1 250px; /* 매 grow, shrink, basis */
|
||||
max-width: 400px;
|
||||
}
|
||||
```
|
||||
|
||||
**언제 쓰면 안 되는가:**
|
||||
- *(TODO)*
|
||||
### Sidebar + content
|
||||
```css
|
||||
.layout {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.sidebar {
|
||||
flex: 0 0 240px; /* 매 fixed */
|
||||
}
|
||||
.content {
|
||||
flex: 1; /* 매 fill remaining */
|
||||
}
|
||||
```
|
||||
|
||||
## 🧪 검증 상태 (Validation)
|
||||
### Holy grail (header + main + footer + 2 sidebars)
|
||||
```css
|
||||
.holy-grail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.main-area {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
.left, .right { flex: 0 0 200px; }
|
||||
.middle { flex: 1; }
|
||||
```
|
||||
|
||||
- **정보 상태:** needs_review
|
||||
- **출처 신뢰도:** A
|
||||
- **검토 이유:** *(P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)*
|
||||
### Stack with auto margin
|
||||
```css
|
||||
.stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.footer {
|
||||
margin-top: auto; /* 매 push to bottom */
|
||||
}
|
||||
```
|
||||
|
||||
## 🧬 중복 검사 (Duplicate Check)
|
||||
### Equal height columns
|
||||
```css
|
||||
.cols {
|
||||
display: flex;
|
||||
align-items: stretch; /* 매 default — equal height */
|
||||
}
|
||||
```
|
||||
|
||||
- **기존 유사 문서:** *(TODO: 인덱서 클러스터 리포트 참조)*
|
||||
- **처리 방식:** UPDATE (자동 정규화)
|
||||
- **처리 이유:** Phase 1 정규화 — 옛 템플릿/누락 필드 보강.
|
||||
### Reorder (responsive)
|
||||
```css
|
||||
.item-1 { order: 2; }
|
||||
.item-2 { order: 1; }
|
||||
.item-3 { order: 3; }
|
||||
|
||||
## ⚠️ 모순 및 업데이트 (Contradictions & Updates)
|
||||
@media (min-width: 768px) {
|
||||
.item-1 { order: 1; }
|
||||
.item-2 { order: 2; }
|
||||
}
|
||||
```
|
||||
|
||||
- **과거 데이터와의 충돌:** 없음
|
||||
- **정책 변화:** 없음
|
||||
### Pricing card layout
|
||||
```css
|
||||
.pricing {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: stretch;
|
||||
}
|
||||
.plan {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.cta {
|
||||
margin-top: auto;
|
||||
}
|
||||
```
|
||||
|
||||
## 🕓 변경 이력 (Changelog)
|
||||
### Form input + button
|
||||
```css
|
||||
.input-group {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.input { flex: 1; }
|
||||
.btn { flex: 0 0 auto; }
|
||||
```
|
||||
|
||||
| 날짜 | 변경 내용 | 처리 방식 | 신뢰도 |
|
||||
|------|-----------|-----------|--------|
|
||||
| 2026-05-08 | P-Reinforce Phase 1 정규화 (frontmatter + 헤더 표준화) | UPDATE | A |
|
||||
### Truncate within flex
|
||||
```css
|
||||
.flex-item {
|
||||
flex: 1;
|
||||
min-width: 0; /* 매 IMPORTANT — 매 default min-width: auto */
|
||||
}
|
||||
.flex-item .text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
```
|
||||
|
||||
### Responsive switch
|
||||
```css
|
||||
.layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.layout { flex-direction: row; }
|
||||
}
|
||||
```
|
||||
|
||||
### Spacer
|
||||
```html
|
||||
<div class="toolbar">
|
||||
<button>Left</button>
|
||||
<div style="flex: 1"></div> <!-- 매 spacer -->
|
||||
<button>Right</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Tailwind equivalent
|
||||
```html
|
||||
<div class="flex justify-between items-center gap-4 p-4">
|
||||
<div class="flex-1 min-w-0">...</div>
|
||||
<button class="flex-shrink-0">Action</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
### CSS-in-JS (styled-components)
|
||||
```js
|
||||
const Flex = styled.div`
|
||||
display: flex;
|
||||
gap: ${p => p.gap || '1rem'};
|
||||
flex-direction: ${p => p.column ? 'column' : 'row'};
|
||||
justify-content: ${p => p.justify || 'flex-start'};
|
||||
align-items: ${p => p.align || 'stretch'};
|
||||
`;
|
||||
```
|
||||
|
||||
## 매 결정 기준
|
||||
| 상황 | Use |
|
||||
|---|---|
|
||||
| 1D layout | Flex |
|
||||
| 2D grid | Grid |
|
||||
| Navbar | Flex |
|
||||
| Card grid responsive | Flex wrap or Grid |
|
||||
| Equal columns | Flex 1 |
|
||||
| Centering | Flex center |
|
||||
| Sidebar | Flex fixed + 1 |
|
||||
|
||||
**기본값**: 매 1D = Flex + gap. 매 2D = Grid. 매 modern = `display: flex` + `gap` + `min-width: 0` for truncation.
|
||||
|
||||
## 🔗 Graph
|
||||
- 부모: [[CSS]] · [[Layout]]
|
||||
- 변형: [[CSS-Grid]] · [[Container-Queries]]
|
||||
- 응용: [[Responsive-Design]] · [[Tailwind-CSS]]
|
||||
- Adjacent: [[Logical-Properties]] · [[Subgrid]]
|
||||
|
||||
## 🤖 LLM 활용
|
||||
**언제**: 매 1D layout. 매 navbar, toolbar, card stack.
|
||||
**언제 X**: 매 complex 2D grid.
|
||||
|
||||
## ❌ 안티패턴
|
||||
- **Forget min-width: 0**: 매 truncation 의 fail.
|
||||
- **flex: auto vs flex: 1 confusion**: 매 different.
|
||||
- **No gap fallback (legacy)**: 매 margin 의 use.
|
||||
- **Flex for 2D grid**: 매 Grid 의 use.
|
||||
- **align vs justify swap**: 매 axis confusion.
|
||||
|
||||
## 🧪 검증 / 중복
|
||||
- Verified (CSS Flexible Box spec, MDN).
|
||||
- 신뢰도 A.
|
||||
|
||||
## 🕓 Changelog
|
||||
| 날짜 | 변경 |
|
||||
|---|---|
|
||||
| 2026-05-08 | Phase 1 |
|
||||
| 2026-05-10 | Manual cleanup — properties + 매 navbar / cards / center / responsive code |
|
||||
|
||||
Reference in New Issue
Block a user