--- id: css-flexbox-intro title: "CSS Flexbox Intro" category: "Frontend" status: "draft" verification_status: "conceptual" canonical_id: "" aliases: ["Flexbox", "Flexible Box Layout", "display flex", "flex container flex items", "CSS flex layout"] duplicate_of: "" source_trust_level: "B" confidence_score: 0.88 created_at: 2026-06-23 updated_at: 2026-06-23 review_reason: "" merge_history: [] tags: ["css", "web", "frontend", "w3schools", "flexbox", "layout"] raw_sources: ["https://www.w3schools.com/css/css3_flexbox.asp"] applied_in: [] github_commit: "" --- # [[CSS Flexbox Intro]] ## 🎯 ν•œ 쀄 톡찰 (One-line insight) CSS Flexbox (the Flexible Box Layout module) is a one-dimensional layout model that arranges items horizontally or vertically inside a flex container in a flexible, responsive way. [S1] ## 🧠 핡심 κ°œλ… (Core concepts) - **What it is** β€” CSS Flexbox is short for the CSS Flexible Box Layout module; it is a layout model for arranging items (horizontally or vertically) within a container, in a flexible and responsive way. [S1] - **Flex container** β€” the parent element, made a flex container with `display: flex` (or `inline-flex`). [S1] - **Flex items** β€” the direct children of the container automatically become flex items. [S1] - **One- vs two-dimensional** β€” CSS Flexbox is used for a one-dimensional layout, with rows OR columns; CSS Grid is used for a two-dimensional layout, with rows AND columns. [S1] ## 🧩 μΆ”μΆœλœ νŒ¨ν„΄ (Extracted patterns) - **Container/item pattern** β€” declare `display: flex` on a parent; its direct children become arrangeable flex items automatically. [S1] - **One-dimensional choice** β€” reach for flexbox when laying out along a single axis (a row OR a column); reach for Grid for two-axis layouts. [S1] ## πŸ“– μ„ΈλΆ€ λ‚΄μš© (Details) CSS Flexbox is short for the CSS Flexible Box Layout module. Flexbox is a layout model for arranging items (horizontally or vertically) within a container, in a flexible and responsive way. [S1] Flexbox consists of: [S1] - **A Flex Container** β€” the parent element with `display: flex` or `inline-flex`. [S1] - **Flex Items** β€” the direct children that automatically become flex items. [S1] **Flexbox vs Grid:** CSS Flexbox is used for a one-dimensional layout, with rows OR columns. CSS Grid is used for a two-dimensional layout, with rows AND columns. [S1] **Example β€” a basic flex container with three items** [S1] ```html
Item 1
Item 2
Item 3
``` **CSS Flexbox properties / browser-support table:** Not found in source (a property reference table was not present in the fetched content for this intro page; the source links forward to the Flex Container, Flex Items, and Flex Responsive pages). [S1] ## πŸ› οΈ 적용 사둀 (Applied in summary) The page's applied example is a `.container` set to `display: flex` with a DodgerBlue background holding three styled `div` children ("Item 1", "Item 2", "Item 3"), which render in a horizontal row. No external project/commit applications found in the source. ## πŸ’» μ½”λ“œ νŒ¨ν„΄ (Code patterns) Make an element a flex container (language: CSS): ```css .container { display: flex; } ``` Container with three items (language: HTML): ```html
Item 1
Item 2
Item 3
``` ## βš–οΈ 비ꡐ 및 선택 κΈ°μ€€ (Comparison & decision criteria) - **Flexbox** β€” one-dimensional layout (rows OR columns). Choose it for arranging items along a single axis flexibly and responsively. [S1] - **CSS Grid** β€” two-dimensional layout (rows AND columns). Choose it when you need to control both axes simultaneously. [S1] ## βš–οΈ λͺ¨μˆœ 및 μ—…λ°μ΄νŠΈ (Contradictions & updates) No contradictions found in the source. ## βœ… 검증 μƒνƒœ 및 신뒰도 - **μƒνƒœ:** draft - **검증 단계:** conceptual (μ‹€μ œ 적용 사둀 발견 μ‹œ applied/validated둜 승격 κ°€λŠ₯) - **좜처 신뒰도:** B (W3Schools β€” widely used educational reference, not a primary standards body) - **μ‹ λ’° 점수:** 0.88 - **쀑볡 검사 κ²°κ³Ό:** μ‹ κ·œ 생성 (New discovery) ## πŸ”— 지식 κ·Έλž˜ν”„ (Knowledge Graph) - **μƒμœ„/루트:** [[CSS Tutorial]] - **κ΄€λ ¨ κ°œλ…:** [[CSS Flex Container]], [[CSS Flex Items]], [[CSS Grid]], [[CSS Media Queries]] - **μ°Έμ‘° λ§₯락:** The entry point for single-axis flexible layouts; precedes the Flex Container and Flex Items detail pages. ## πŸ“š 좜처 (Sources) - [S1] W3Schools β€” CSS Flexbox Intro β€” https://www.w3schools.com/css/css3_flexbox.asp ## πŸ“ λ³€κ²½ 이λ ₯ (Change history) - 2026-06-23: Initial draft synthesized from the W3Schools "CSS Flexbox Intro" page (Astra wiki-curation, P-Reinforce v3.1 format).