Files

T

Antigravity Agent 1cfd3bbb56 docs(10_Wiki): 위키 구조 정리 — 언어 튜토리얼 카테고리 폴더 제거 + 신규 자산 동기화

Topic_CSS/Topic_HTML/Topic_JavaScript/Topic_Prompt/Topic_Comfyui 등 기존 카테고리 폴더를 정리하고,
Topic_Graphic/Dev 등 신규 산출물과 Topics 내부 세션/메모리 기록을 동기화.

2026-07-05 00:10:59 +09:00

6.5 KiB

Raw Blame History

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

title

CSS Flexbox Container

🎯 한 줄 통찰 (One-line insight)

The flex container is the parent (set with display: flex or inline-flex) and exposes container-level properties — flex-direction, flex-wrap, flex-flow, justify-content, align-items, and align-content — that govern how its flex items are laid out and aligned. [S1]

🧠 핵심 개념 (Core concepts)

The container — must be set to flex or inline-flex via the display property. [S1]
flex-direction — sets the display-direction of flex items. [S1]
flex-wrap — specifies whether the flex items should wrap or not. [S1]
flex-flow — a shorthand property for setting both flex-direction and flex-wrap. [S1]
justify-content — aligns the flex items when they do not use all available space on the main-axis (horizontally). [S1]
align-items — aligns the flex items when they do not use all available space on the cross-axis (vertically). [S1]
align-content — aligns the flex lines when there is extra space in the cross axis and flex items wrap. [S1]

🧩 추출된 패턴 (Extracted patterns)

Direction control — switch the main axis with flex-direction: row | column | row-reverse | column-reverse. [S1]
Wrapping control — allow multi-line layouts with flex-wrap: nowrap | wrap | wrap-reverse. [S1]
Shorthand — combine direction and wrapping in one declaration, e.g. flex-flow: row wrap. [S1]
Axis alignment — justify-content aligns on the main (horizontal) axis; align-items / align-content align on the cross (vertical) axis. [S1]

📖 세부 내용 (Details)

The flex container has seven key properties: display (must be set to flex or inline-flex), flex-direction, flex-wrap, flex-flow, justify-content, align-items, and align-content. [S1]

flex-direction — controls the display-direction of flex items, with the values demonstrated on the page: [S1]

.flex-container {
  display: flex;
  flex-direction: row;
}

.flex-container {
  display: flex;
  flex-direction: column;
}

.flex-container {
  display: flex;
  flex-direction: row-reverse;
}

.flex-container {
  display: flex;
  flex-direction: column-reverse;
}

The four values are: row (default — items left to right), column (items top to bottom), row-reverse (items right to left), and column-reverse (items bottom to top). [S1]

flex-wrap — specifies whether items wrap when space is insufficient, with the values demonstrated on the page: [S1]

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}

The three values are: nowrap (default — items don't wrap, shown as boxes 1–9 in a single line), wrap (items wrap onto multiple lines as needed), and wrap-reverse (items wrap in reverse order). [S1]

flex-flow — a shorthand property for setting both flex-direction and flex-wrap, demonstrated as: [S1]

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

justify-content, align-items, align-content — these properties are part of the container's property set (descriptions in the table below). On this page their specific demonstrated values were not captured in the fetched content; the source notes that horizontal alignment (justify-content) and vertical alignment (align-items & align-content) are covered on subpages. Specific value-by-value examples: Not found in source (for this page). [S1]

CSS Flexbox container properties reference [S1]

Property	Description
`display`	Must be set to `flex` or `inline-flex`
`flex-direction`	Sets the display-direction of flex items
`flex-wrap`	Specifies whether the flex items should wrap or not
`flex-flow`	A shorthand property for `flex-direction` and `flex-wrap`
`justify-content`	Aligns the flex items when they do not use all available space on the main-axis (horizontally)
`align-items`	Aligns the flex items when they do not use all available space on the cross-axis (vertically)
`align-content`	Aligns the flex lines when there is extra space in the cross axis and flex items wrap

🛠️ 적용 사례 (Applied in summary)

The page's applied examples demonstrate each flex-direction value (row, column, row-reverse, column-reverse) on a .flex-container, each flex-wrap value (nowrap, wrap, wrap-reverse) with nine numbered boxes, and the flex-flow: row wrap shorthand. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Set direction and wrapping (language: CSS):

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

Shorthand equivalent (language: CSS):

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

⚖️ 모순 및 업데이트 (Contradictions & updates)

No contradictions found in the source.

✅ 검증 상태 및 신뢰도

상태: draft
검증 단계: conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
출처 신뢰도: B (W3Schools — widely used educational reference, not a primary standards body)
신뢰 점수: 0.86
중복 검사 결과: 신규 생성 (New discovery)

🔗 지식 그래프 (Knowledge Graph)

상위/루트: CSS Tutorial
관련 개념: CSS Flexbox Intro, CSS Flex Items, CSS Grid, CSS Media Queries
참조 맥락: Referenced when configuring the parent flex container's direction, wrapping, and alignment behavior.

📚 출처 (Sources)

[S1] W3Schools — CSS Flexbox Container — https://www.w3schools.com/css/css3_flexbox_container.asp

📝 변경 이력 (Change history)

2026-06-23: Initial draft synthesized from the W3Schools "CSS Flexbox Container" page (Astra wiki-curation, P-Reinforce v3.1 format).

6.5 KiB Raw Blame History Unescape Escape