2nd/10_Wiki/Topics/AI_and_ML/Flexbox.md

---
id: wiki-2026-0508-flexbox
title: Flexbox
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [flexbox, flex layout, CSS flex, justify-content, align-items]
duplicate_of: none
source_trust_level: A
confidence_score: 0.96
verification_status: applied
tags: [css, flexbox, layout, frontend, responsive, web]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: CSS
  applicable_to: [Frontend, Responsive Design]
---

# Flexbox

## 매 한 줄
> **"매 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.

## 매 핵심

### 매 main concept
- **Container** (parent): `display: flex`.
- **Items** (children).
- **Main axis**: row (default) or column.
- **Cross axis**: 매 perpendicular.

### 매 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.

### 매 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.

## 💻 패턴

### Center (legendary)
```css
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
```

### Navbar
```css
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
}
.nav-links {
  display: flex;
  gap: 1rem;
}
```

### Card grid (with wrap)
```css
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.card {
  flex: 1 1 250px;  /* 매 grow, shrink, basis */
  max-width: 400px;
}
```

### Sidebar + content
```css
.layout {
  display: flex;
  min-height: 100vh;
}
.sidebar {
  flex: 0 0 240px;  /* 매 fixed */
}
.content {
  flex: 1;  /* 매 fill remaining */
}
```

### 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; }
```

### Stack with auto margin
```css
.stack {
  display: flex;
  flex-direction: column;
}
.footer {
  margin-top: auto;  /* 매 push to bottom */
}
```

### Equal height columns
```css
.cols {
  display: flex;
  align-items: stretch;  /* 매 default — equal height */
}
```

### Reorder (responsive)
```css
.item-1 { order: 2; }
.item-2 { order: 1; }
.item-3 { order: 3; }

@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;
}
```

### Form input + button
```css
.input-group {
  display: flex;
  gap: 0.5rem;
}
.input { flex: 1; }
.btn { flex: 0 0 auto; }
```

### 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
- 부모: [[Layout]]
- 변형: [[CSS-Grid]] · [[Container-Queries]]
- 응용: [[Responsive-Design]] · [[Tailwind-CSS]]
- Adjacent: [[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 |