Wiki Article · Cinematic

Flexbox

Flexbox (CSS Flexible Box Layout) ek CSS layout module hai jo web page par elements ko ek dimension…

Overview

Flexbox — Quick Facts

📌

Property: Detail

🎯

Full Name: CSS Flexible Box Layout Module

⚡

Short Name: Flexbox

🔑

Category: CSS Layout

Topic 1

Infobox

📚 | Property | Detail | |---|---| | Full Name | CSS Flexible Box Layout Module | | Short…

Topic 2

1. Parichay (Introduction)

💡

Items ka alignment…

🔑

Items ke beech spacing distribute…

⚡

Items ka size dynamically adjust…

🎯

Responsive behavior without media…

Topic 3

2. History & Browser Support

💡

2009: Pehla Flexbox draft (syntax…

🔑

2012: Updated syntax…

⚡

2014-2015: Final modern syntax…

🎯

Aaj: Sab modern browsers fully…

Topic 4

3. Core Concepts

💡

Flex Container: Parent element jis…

🔑

Flex Items: Container ke direct…

⚡

Main Axis: Primary direction jisme…

🎯

Cross Axis: Main axis ke…

Topic 5

4. Flex Container Properties

💡

flex-start: Items start me

🔑

center: Items center me

⚡

flex-end: Items end me

🎯

space-between: Pehla item start,…

Topic 6

5. Flex Item Properties

💡

flex: 1 = flex: 1 1 0 — item grow…

🔑

flex: auto = flex: 1 1 auto — item…

⚡

flex: none = flex: 0 0 auto — item…

🎯

Agar 3 items hain aur sab ka…

Topic 7

6. Common Layout Patterns

💡

Container par display: flex;…

🔑

Vertical + horizontal centering ek…

⚡

display: flex; justify-content:…

🎯

Logo left, nav links right —…

Topic 8

7. Flexbox vs CSS Grid

💡

Flexbox: Navigation, toolbars,…

🔑

Grid: Page layouts, dashboards,…

⚡

Both together: Grid page layout ke…

Topic 9

8. Fayde aur Challenges

📚 Fayde (Benefits) | # | Benefit | Description | |---|---|---| | 1 | Easy Centering |…

Comparison

7. Flexbox vs CSS Grid

⚖️

1: Dimension

⚖️

2: Content vs Layout

⚖️

3: Best For

Diagram

Visual Flow

📊 Diagram visualization — details in narration

Quiz — Question 1

Flexbox ka sabse sahi definition kya hai?

Quick Quiz

Quiz — Question 2

Flexbox ka 'Full Name' kya hai?

Complete! 🎉

Flexbox Complete!

Aliens Wiki · HIEN · Cinematic Knowledge

✅

Flexbox Complete

➡️

Flexbox

Flexbox — Quick Facts

Property: Detail

Full Name: CSS Flexible Box Layout Module

Short Name: Flexbox

Category: CSS Layout

Infobox

1. Parichay (Introduction)

Items ka alignment…

Items ke beech spacing distribute…

Items ka size dynamically adjust…

Responsive behavior without media…

2. History & Browser Support

2009: Pehla Flexbox draft (syntax…

2012: Updated syntax…

2014-2015: Final modern syntax…

Aaj: Sab modern browsers fully…

3. Core Concepts

Flex Container: Parent element jis…

Flex Items: Container ke direct…

Main Axis: Primary direction jisme…

Cross Axis: Main axis ke…

4. Flex Container Properties

flex-start: Items start me

center: Items center me

flex-end: Items end me

space-between: Pehla item start,…

5. Flex Item Properties

flex: 1 = flex: 1 1 0 — item grow…

flex: auto = flex: 1 1 auto — item…

flex: none = flex: 0 0 auto — item…

Agar 3 items hain aur sab ka…

6. Common Layout Patterns

Container par display: flex;…

Vertical + horizontal centering ek…

display: flex; justify-content:…

Logo left, nav links right —…

7. Flexbox vs CSS Grid

Flexbox: Navigation, toolbars,…

Grid: Page layouts, dashboards,…

Both together: Grid page layout ke…

8. Fayde aur Challenges

7. Flexbox vs CSS Grid

1: Dimension

2: Content vs Layout

3: Best For

Visual Flow

See Also

CSS Grid

CSS

Responsive Web Design

HTML

Web Design

Box Model

Quiz — Question 1

Quiz — Question 2

Flexbox Complete!

Flexbox Complete

CSS Grid