पाठ 26, कुल 30 में

CSS Flexbox — लचीला लेआउट

4 मिनट पढ़ें · मुफ़्त · बिना लॉगिन

English हिंदी

CSS वेबसाइट लेआउट CSS Grid — दो-आयामी लेआउट

Flexbox से पहले boxes को पंक्ति में लगाना सिरदर्द था। लोग floats, inline-block और fixed widths इस्तेमाल करते थे, और boxes टूटते रहते थे, अगली लाइन में गिर जाते थे, या ऊपर-नीचे बराबर नहीं बैठते थे। Flexbox इसी परेशानी को खत्म करने के लिए बना। सिर्फ एक लाइन — display: flex — से container अपने बच्चों की कमान संभाल लेता है और उन्हें पंक्ति या कॉलम में साफ-सुथरा लगा देता है।

Diagram — देखें, यह सब कैसे जुड़ता है

Flexbox एक एक-आयामी (one-dimensional) लेआउट तरीका है: यह items को एक बार में एक ही लाइन में सजाता है, या तो आड़े (पंक्ति) या खड़े (कॉलम)। यही ज़्यादातर पेज के हिस्सों को चाहिए होता है — कार्ड की पंक्ति, buttons की पंक्ति, menu, या ऐसे boxes जो जगह बराबर बाँट लें।

Flex container और उसके items

Flexbox में दो भूमिकाएँ होती हैं। Container वह parent box है जिस पर display: flex लगा होता है। Items उसके सीधे बच्चे होते हैं। Container पर लिखी properties पूरी पंक्ति को नियंत्रित करती हैं; item पर लिखी property सिर्फ उस item को नियंत्रित करती है। Container की सबसे ज़रूरी properties हैं flex-direction, justify-content, align-items, flex-wrap और gap।

Syntax — तीन कार्ड की पंक्ति

.cards {
  display: flex;
  gap: 20px;
}
.card {
  flex: 1;
  padding: 20px;
  border: 1px solid #ccc;
}

यहाँ हर कार्ड पर flex: 1 का मतलब है "जगह का बराबर हिस्सा लो"। flex: 1 वाले तीन कार्ड पंक्ति का एक-तिहाई हिस्सा लेते हैं, और gap: 20px उनके बीच बराबर 20px की जगह रखता है।

Direction, alignment और wrapping

flex-direction दिशा चुनता है: row (बाएँ से दाएँ, डिफ़ॉल्ट) या column (ऊपर से नीचे)। justify-content items को उसी दिशा में लगाता है — flex-start, center, space-between या space-around। align-items उन्हें उस दिशा के आर-पार लगाता है — पंक्ति के लिए इसका मतलब ऊपर से नीचे है, इसलिए align-items: center हर कार्ड को बीच में लंबवत (vertically) लगा देता है। अगर एक लाइन में items ज़्यादा हो जाएँ, तो flex-wrap: wrap उन्हें सिकुड़ने की बजाय अगली लाइन में बहने देता है।

Note: flex-direction बदलते ही justify-content और align-items का मतलब बदल जाता है। पंक्ति में justify आड़े काम करता है और align खड़े। कॉलम में justify खड़े काम करता है और align आड़े। तरकीब यह है कि main axis (आपकी चुनी हुई दिशा) और cross axis (दूसरी दिशा) को याद रखें।

Tip: Flex items के बीच spacing के लिए margins की बजाय gap इस्तेमाल करें। हर item पर margin बाहरी किनारों पर भी जगह जोड़ देता है, जिसे फिर हटाना पड़ता है; gap सिर्फ items के बीच जगह रखता है, बाहर कभी नहीं।

आम गलतियाँ

display: flex को items पर लगाना, container पर नहीं — कुछ नहीं होता, क्योंकि flex सिर्फ parent से काम करता है।
flex-wrap: wrap भूल जाना — सँकरी phone screen पर items अगली लाइन में जाने की बजाय एक ही पंक्ति में सिकुड़ जाते हैं।
justify-content और align-items को आपस में मिला देना — याद रखें, justify उस दिशा का अनुसरण करता है जो आपने flex-direction से तय की है।
Flex items पर fixed widths इस्तेमाल करना — items सिकुड़ या बढ़ नहीं सकते, इसलिए पंक्ति छोटी screen पर बाहर निकल जाती है। इसकी बजाय flex: 1 या flex-basis इस्तेमाल करें।
Spacing के लिए हर item पर margins जोड़ना — container पर gap इस्तेमाल करें, जो साफ है और किनारों पर कभी जगह नहीं जोड़ता।

याद रखें

Flexbox एक-आयामी है: एक बार में एक पंक्ति या एक कॉलम।
Container को display: flex मिलता है; उसके बच्चे items होते हैं।
flex-direction पंक्ति या कॉलम तय करता है; justify-content उसी दिशा में लगाता है; align-items आर-पार लगाता है।
flex: 1 items को जगह बराबर बाँट देता है।
flex-wrap: wrap items को अगली लाइन में जाने देता है; gap उन्हें बराबर जगह देता है।

याद रखने की तरकीब: एक लाइन में Flexbox, दो दिशा में Grid — पंक्ति चाहिए तो Flex, नक्शा चाहिए तो Grid।

उदाहरण समझिए

.cards { display: flex; } — container flex container बन जाता है, इसलिए तीनों student कार्ड एक के ऊपर एक होने की बजाय पंक्ति में लग जाते हैं।
justify-content: space-between — पहला कार्ड बाएँ किनारे को छूता है, आखिरी कार्ड दाएँ किनारे को, और बची हुई जगह उनके बीच बराबर बँट जाती है।
align-items: center — कार्ड बीच में लंबवत बराबर बैठते हैं, इसलिए एक कार्ड में ज़्यादा text होने पर भी वे एक सीध में दिखते हैं।
.card { flex: 1; } — हर कार्ड पंक्ति का बराबर हिस्सा लेता है, इसलिए तीनों की चौड़ाई एक जैसी हो जाती है।
gap: 20px — कार्ड के बीच 20px की साफ जगह है, और बाहरी किनारों पर कोई अतिरिक्त जगह नहीं।
flex-wrap: wrap — सँकरी phone screen पर कार्ड एक पंक्ति में सिकुड़ने की बजाय अगली लाइन में गिर जाते हैं।

उदाहरण

Example

<!DOCTYPE html>
<html>
<head>
<title>Student Cards with Flexbox</title>
<style>
* { box-sizing: border-box; }
body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f2f2f2; }
h1 { text-align: center; color: #333; }
.cards {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 900px;
  margin: auto;
}
.card {
  flex: 1;
  min-width: 200px;
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.card h2 { color: #04aa6d; margin: 10px 0; }
.card p { color: #666; }
</style>
</head>
<body>

<h1>Our Top Students</h1>

<div class="cards">
<div class="card">
<h2>Rahul Verma</h2>
<p>HTML and CSS</p>
<p>Score: 95%</p>
</div>

<div class="card">
<h2>Priya Sharma</h2>
<p>Python</p>
<p>Score: 92%</p>
<p>Best in class project</p>
</div>

<div class="card">
<h2>Amit Kumar</h2>
<p>Java</p>
<p>Score: 90%</p>
</div>
</div>

</body>
</html>

परिणाम

परिणाम — ब्राउज़र में यह कैसा दिखता है

खुद करके देखें — लाइव एडिटर

नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।

<!DOCTYPE html>
<html>
<head>
<title>Student Cards with Flexbox</title>
<style>
* { box-sizing: border-box; }
body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f2f2f2; }
h1 { text-align: center; color: #333; }
.cards {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 900px;
  margin: auto;
}
.card {
  flex: 1;
  min-width: 200px;
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.card h2 { color: #04aa6d; margin: 10px 0; }
.card p { color: #666; }
</style>
</head>
<body>

<h1>Our Top Students</h1>

<div class="cards">
<div class="card">
<h2>Rahul Verma</h2>
<p>HTML and CSS</p>
<p>Score: 95%</p>
</div>

<div class="card">
<h2>Priya Sharma</h2>
<p>Python</p>
<p>Score: 92%</p>
<p>Best in class project</p>
</div>

<div class="card">
<h2>Amit Kumar</h2>
<p>Java</p>
<p>Score: 90%</p>
</div>
</div>

</body>
</html>

पूरे एडिटर में खोलें

परिणाम

खुद क्यों सीखें — AI से पूछने के बजाय?

AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।