TrueVacancy Academy

HTML, CSS & JavaScript · Chapter 1.9 · Intermediate level

CSS Box Model & Flexbox (Cards in a Row)

CSS Box Model और Flexbox (कार्ड्स एक लाइन में)

Every element on a page is a box, like a gift box: content inside, padding (bubble wrap around the gift), border (the box wall) and margin (space between boxes). To place boxes side by side — like products on Flipkart — we use Flexbox: write display: flex; on the parent and its children line up in a row. gap adds space between them and justify-content decides where they sit.

पेज का हर हिस्सा एक डिब्बा (box) है, गिफ़्ट बॉक्स जैसा: अंदर content, उसके चारों तरफ़ padding (बबल रैप), फिर border (डिब्बे की दीवार) और margin (दो डिब्बों के बीच की जगह)। डिब्बों को एक लाइन में लगाने के लिए — जैसे Flipkart पर प्रोडक्ट्स — Flexbox इस्तेमाल करते हैं: parent पर display: flex; लिखो और उसके बच्चे एक लाइन में आ जाते हैं। gap बीच में जगह देता है और justify-content तय करता है कि वे कहाँ बैठें।

Open this chapter in the live classroomHTML, CSS & JavaScript course outline

In the classroom you can run and edit this code in your browser, get hints and mark the chapter as done. क्लास में यह code ब्राउज़र में चलाकर बदल सकते हो।

Words and symbols in this chapter

padding: 16px;
Space INSIDE the box, between the text and the border.
डिब्बे के अंदर की जगह — टेक्स्ट और border के बीच।
border: 2px solid #6366f1;
The visible line around the box: thickness, style, colour.
डिब्बे के चारों ओर दिखने वाली लाइन: मोटाई, स्टाइल, रंग।
margin: 10px;
Space OUTSIDE the box, pushing other boxes away.
डिब्बे के बाहर की जगह, जो दूसरे डिब्बों को दूर रखती है।
display: flex;
Put on the parent: its children line up in a row.
Parent पर लगाओ: उसके अंदर के बच्चे एक लाइन में आ जाते हैं।
gap: 12px;
Equal space between the flex children.
Flex बच्चों के बीच बराबर जगह।
justify-content: center;
Where the row sits: flex-start, center, space-between.
लाइन कहाँ बैठे: flex-start, center, space-between।

Ready example

<style>
  .row { display: flex; gap: 12px; justify-content: center; }
  .card { padding: 16px; border: 2px solid #6366f1; border-radius: 12px; margin: 4px; width: 120px; text-align: center; }
</style>

<h2>Mere Favourite Games</h2>
<div class="row">
  <div class="card">🏏 Cricket</div>
  <div class="card">♟️ Chess</div>
  <div class="card">⚽ Football</div>
</div>

What you will see: Three cards sit side by side in a neat centred row — try justify-content: space-between.

तीन कार्ड बीच में एक लाइन में दिखेंगे — justify-content: space-between लगाकर देखो।

Line by line

.row { display: flex; gap: 12px; justify-content: center; }
The parent box puts its children in one centred row with 12px gaps.
Parent डिब्बा अपने बच्चों को बीच में एक लाइन में, 12px जगह के साथ रखता है।
.card { padding: 16px; border: 2px solid ...; }
Each card gets inner space, a coloured border and rounded corners.
हर कार्ड को अंदर जगह, रंगीन border और गोल कोने मिलते हैं।
<div class="row"> ... </div>
The three cards live inside the flex row.
तीनों कार्ड flex row के अंदर रखे हैं।

Common mistake

✗ Wrong

.row { display flex }

✓ Right

.row { display: flex; }

CSS needs a colon : between property and value and a semicolon ; at the end.

CSS में property और value के बीच : और आख़िर में ; लगाना ज़रूरी है।

Your task

Make the three boxes sit in one row using display: flex; with a gap, and give each box padding and a border.

display: flex; और gap से तीनों डिब्बे एक लाइन में लगाओ, और हर डिब्बे को padding और border दो।

  1. Inside .row { } write display: flex; and gap: 12px;.
    .row { } के अंदर display: flex; और gap: 12px; लिखो।
  2. Inside .box { } write padding: 14px; and border: 2px solid green;.
    .box { } के अंदर padding: 14px; और border: 2px solid green; लिखो।
  3. Press ▶ Run — the boxes should now stand side by side.
    ▶ Run दबाओ — अब डिब्बे साथ-साथ खड़े दिखेंगे।
Starter code for the task
<style>
  .row {
    /* TODO: yahan display: flex; aur gap: 12px; likho */
  }
  .box {
    /* TODO: yahan padding: 14px; aur border: 2px solid green; likho */
  }
</style>

<div class="row">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

Do this task in the classroom: your code is checked automatically and you get hints if something is missing.

Recap

Quick quiz

Which CSS property puts child boxes side by side in a row?

कौन-सी CSS property बच्चों के डिब्बों को एक लाइन में लगाती है?

  1. color: flex;
  2. display: flex;
  3. margin: row;
  4. padding: flex;
Show the answer

Answer: B (display: flex;)

display: flex; on the parent turns on Flexbox.

Parent पर display: flex; लगाने से Flexbox चालू होता है।

Practice problems for this chapter

Solve them in the Practice Zone, where each answer is checked automatically and two hints are available.