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

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

id	title	category	status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	verification_status	tags	raw_sources	last_reinforced	github_commit	tech_stack
wiki-2026-0508-flexbox	Flexbox	10_Wiki/Topics	verified	self	flexbox flex layout CSS flex justify-content align-items	none	A	0.96	applied	css flexbox layout frontend responsive web		2026-05-10	pending	language applicable_to CSS 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)

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Navbar

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

Card grid (with wrap)

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.card {
  flex: 1 1 250px;  /* 매 grow, shrink, basis */
  max-width: 400px;
}

Sidebar + content

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

Holy grail (header + main + footer + 2 sidebars)

.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

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

Equal height columns

.cols {
  display: flex;
  align-items: stretch;  /* 매 default — equal height */
}

Reorder (responsive)

.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

.pricing {
  display: flex;
  gap: 1rem;
  align-items: stretch;
}
.plan {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.cta {
  margin-top: auto;
}

Form input + button

.input-group {
  display: flex;
  gap: 0.5rem;
}
.input { flex: 1; }
.btn { flex: 0 0 auto; }

Truncate within flex

.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

.layout {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .layout { flex-direction: row; }
}

Spacer

<div class="toolbar">
  <button>Left</button>
  <div style="flex: 1"></div>  <!-- 매 spacer -->
  <button>Right</button>
</div>

Tailwind equivalent

<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)

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