📘 Lesson · Lesson 25

Flexbox Complete

What Flexbox Is

Flexbox is CSS's tool for arranging items in a row or column, with powerful control over spacing and alignment. Before flexbox, aligning things, centering vertically, and spacing items evenly required painful hacks (floats, tables, magic numbers). Flexbox made all of it easy and intuitive. It's the single most important layout skill in modern CSS — navigation bars, card rows, centered content, button groups: flexbox handles them all cleanly. If you learn one layout tool well, make it this one.

Turning On Flexbox — one line

.container {
    display: flex;    /* the container becomes a "flex container" */
}
/* Its DIRECT CHILDREN automatically become "flex items" arranged in a row */

Before flex: [Item1] After flex: [Item1][Item2][Item3] [Item2] (side by side in a row) [Item3] (stacked)

It all starts with display: flex on a CONTAINER. The moment you set this, the container's direct children line up in a row (instead of stacking vertically), becoming "flex items." That's the core mental model: a flex container (the parent, where you write flex properties) holds flex items (the children, which get arranged). Almost all flexbox properties go on the container and control how the items inside are laid out.

The Two Axes — the key to understanding flexbox

MAIN AXIS (default: horizontal →)
┌─────────────────────────────────┐
│ [item] [item] [item]            │  ← items flow along the MAIN axis
└─────────────────────────────────┘
        CROSS AXIS (perpendicular ↕)

This is the concept that makes flexbox click: flexbox has two axes. The main axis is the direction items flow (horizontal by default), and the cross axis is perpendicular to it (vertical by default). Why does this matter? Because the two alignment properties each control one axis: justify-content aligns along the MAIN axis, align-items aligns along the CROSS axis. Once you hold "main = the flow direction, cross = across it" in your head, flexbox alignment stops being guesswork. This axis idea is the heart of flexbox.

justify-content — align along the MAIN axis

.container {
    display: flex;
    justify-content: center;         /* all items centered horizontally */
}

Value	Effect (main axis)
flex-start	Items packed at the start (default)
center	Items centered
flex-end	Items packed at the end
space-between	Equal space BETWEEN items (edges touch sides)
space-around	Equal space around each item
space-evenly	Perfectly equal gaps everywhere

justify-content distributes items along the main axis (horizontal by default). The star value is space-between: it pushes the first item to the far left, the last to the far right, and spreads the rest evenly — exactly how a navigation bar with a logo on the left and menu on the right is built. center centers a group of items; the space-* values control gaps. This one property solves most horizontal layout needs.

align-items — align along the CROSS axis

.container {
    display: flex;
    align-items: center;        /* items centered vertically */
    height: 200px;
}

align-items handles the cross axis (vertical by default) — and this is what finally made vertical centering easy. align-items: center centers items vertically within the container. Combine the two properties and you get the famous perfect-centering recipe you met earlier: display: flex; justify-content: center; align-items: center; — items centered both horizontally AND vertically, in three lines. Values mirror justify-content (flex-start, center, flex-end, stretch). Remember: justify = main axis, align = cross axis. That pairing is the whole game.

Exam Corner

Q: How do you create a flex container? display: flex; on the parent element.

Q: What are the two flexbox axes? Main axis (item flow direction, horizontal by default) and cross axis (perpendicular).

Q: Which property aligns items on the main axis? justify-content.

Q: Which property aligns items on the cross axis? align-items.

Q: How do you perfectly center an item both ways? display: flex; justify-content: center; align-items: center;

Flexbox क्या है

Flexbox items को row या column में सजाने का CSS का tool है, spacing और alignment पर ताकतवर control के साथ. Flexbox से पहले चीज़ें align करना, vertically center करना, और items को समान रूप से space करना दर्दनाक hacks (floats, tables, magic numbers) मांगता था. Flexbox ने यह सब आसान और intuitive बना दिया. यह modern CSS का सबसे ज़रूरी layout skill है — navigation bars, card rows, centered content, button groups: flexbox इन सबको साफ संभालता है. अगर एक layout tool अच्छे से सीखें, यही सीखिए.

Flexbox चालू करना — एक line

.container {
    display: flex;    /* container "flex container" ban jata hai */
}
/* Iske DIRECT CHILDREN apne aap row me "flex items" ban jate hain */

Flex se pehle: [Item1] Flex ke baad: [Item1][Item2][Item3] [Item2] (row me side by side) [Item3] (stacked)

सब CONTAINER पर display: flex से शुरू होता है. जिस पल आप यह set करते हैं, container के direct children row में line-up हो जाते हैं (vertically stack के बजाय), "flex items" बनते. वही core mental model: एक flex container (parent, जहां flex properties लिखते हैं) flex items (children, जो सजते हैं) रखता है. लगभग सारी flexbox properties container पर जाती हैं और अंदर के items कैसे lay out हों control करती हैं.

दो Axes — flexbox समझने की चाबी

MAIN AXIS (default: horizontal →)
┌─────────────────────────────────┐
│ [item] [item] [item]            │  ← items MAIN axis ke saath behte
└─────────────────────────────────┘
        CROSS AXIS (lambvat ↕)

यही concept flexbox को click कराता है: flexbox की दो axes हैं. main axis वह दिशा है जिसमें items बहते हैं (default horizontal), और cross axis उसके लंबवत (default vertical). यह क्यों मायने रखता है? क्योंकि दो alignment properties हर एक एक axis control करती हैं: justify-content MAIN axis के साथ align करती है, align-items CROSS axis के साथ. एक बार "main = बहने की दिशा, cross = उसके आर-पार" दिमाग में रखिए, flexbox alignment अंदाज़ा लगाना बंद कर देता है. यह axis विचार flexbox का दिल है.

justify-content — MAIN axis के साथ align

.container {
    display: flex;
    justify-content: center;         /* saare items horizontally center */
}

Value	असर (main axis)
flex-start	Items शुरू में packed (default)
center	Items centered
flex-end	Items अंत में packed
space-between	Items के BEECH समान space (किनारे sides छूते)
space-around	हर item के चारों ओर समान space
space-evenly	हर जगह बिल्कुल समान gaps

justify-content items को main axis (default horizontal) के साथ बांटता है. Star value space-between है: यह पहला item बिल्कुल left, आखिरी बिल्कुल right धकेलता है, और बाकी को समान रूप से फैलाता है — ठीक वैसे जैसे left पर logo और right पर menu वाला navigation bar बनता है. center items के समूह को center करता है; space-* values gaps control करती हैं. यह एक property ज़्यादातर horizontal layout ज़रूरतें हल करती है.

align-items — CROSS axis के साथ align

.container {
    display: flex;
    align-items: center;        /* items vertically center */
    height: 200px;
}

align-items cross axis (default vertical) संभालता है — और यही वह है जिसने आखिरकार vertical centering आसान बनाई. align-items: center items को container के अंदर vertically center करता है. दोनों properties combine कीजिए और वह मशहूर perfect-centering recipe मिलती है जो पहले मिली: display: flex; justify-content: center; align-items: center; — items horizontally AUR vertically दोनों centered, तीन lines में. Values justify-content जैसी (flex-start, center, flex-end, stretch). याद रखिए: justify = main axis, align = cross axis. वही जोड़ी पूरा खेल है.

Exam Corner

Q: Flex container कैसे बनाते हैं? Parent element पर display: flex;.

Q: दो flexbox axes क्या हैं? Main axis (item बहने की दिशा, default horizontal) और cross axis (लंबवत).

Q: कौन-सी property main axis पर items align करती है? justify-content.

Q: कौन-सी property cross axis पर items align करती है? align-items.

Q: Item को दोनों तरह perfectly center कैसे करते हैं? display: flex; justify-content: center; align-items: center;

← Back to CSS Tutorial

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.

👁 Live Preview

सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.