align-items: center फ्लेक्स आइटम्स को क्रॉस-एक्सिस पर केंद्र में संरेखित करता है। Row दिशा (डिफ़ॉल्ट) में यह आइटम्स को **वर्टिकली केंद्र** में रखता है। उदाहरण: center के साथ वर्टिकल सेंटरिंग कंटेनर की ऊंचाई 150px है। सभी आइटम्स (ऊंचाई 40px) वर्टिकली केंद्र में संरेखित हैं। <!DOCTYPE html> &l

align-items: baseline फ्लेक्स आइटम्स को उनके टेक्स्ट की बेसलाइन (baseline) पर संरेखित करता है। यह विभिन्न फॉन्ट आकार वाले आइटम्स के टेक्स्ट को एक रेखा पर संरेखित करने के लिए उपयोगी है। उदाहरण: baseline संरेखण कंटेनर की ऊंचाई 200px है। अलग-अलग फॉन्ट आकार वाले आइटम्स (यदि होते) अपनी बेसलाइन पर संरेखि

flex-direction प्रॉपर्टी फ्लेक्स कंटेनर के मेन एक्सिस (मुख्य अक्ष) की दिशा निर्दिष्ट करती है, जिससे फ्लेक्स आइटम्स का प्रवाह क्रम निर्धारित होता है। उदाहरण: column दिशा आइटम्स ऊपर से नीचे वर्टिकल कॉलम में व्यवस्थित होते हैं। <!DOCTYPE html> <html> <head> <style> .myco

align-content: space-between मल्टी-लाइन फ्लेक्स कंटेनर में पहली फ्लेक्स लाइन को क्रॉस-एक्सिस की शुरुआत में, अंतिम लाइन को अंत में रखता है, और शेष लाइन्स के बीच समान स्पेस वितरित करता है। किनारों पर कोई अतिरिक्त स्पेस नहीं। उदाहरण: space-between के साथ फ्लेक्स लाइन्स कंटेनर की ऊंचाई 200px है। 8 आइटम

हॉरिजॉन्टल (क्षैतिज) बटन ग्रुप बनाने के लिए बटन्स को एक कंटेनर में रखें और display: flex या float: left (पुराना तरीका) का उपयोग करें। मॉडर्न दृष्टिकोण Flexbox का उपयोग करता है। उदाहरण: फ्लेक्सबॉक्स से हॉरिजॉन्टल बटन ग्रुप <!DOCTYPE html> <html> <head> <style> .btn-gro

align-content: stretch (डिफ़ॉल्ट मान) मल्टी-लाइन फ्लेक्स कंटेनर में फ्लेक्स लाइन्स को क्रॉस-एक्सिस पर कंटेनर की पूरी ऊंचाई भरने के लिए फैलाता है। प्रत्येक लाइन समान ऊंचाई पाती है। उदाहरण: stretch के साथ फ्लेक्स लाइन्स फैलाई गईं कंटेनर की ऊंचाई 200px है। 8 आइटम्स 2-2 की 4 लाइन्स बनाते हैं। प्रत्येक

justify-content प्रॉपर्टी फ्लेक्स आइटम्स को मेन एक्सिस पर संरेखित करती है जब आइटम्स सभी उपलब्ध स्थान नहीं घेरते। डिफ़ॉल्ट flex-direction: row में यह हॉरिजॉन्टल संरेखण करती है। उदाहरण: justify-content: center 4 आइटम्स (प्रत्येक 100px) = 400px कुल। कंटेनर चौड़ा है, इसलिए आइटम्स केंद्र में समूहित होते

align-content: center मल्टी-लाइन फ्लेक्स कंटेनर में सभी फ्लेक्स लाइन्स को एक समूह के रूप में क्रॉस-एक्सिस पर केंद्र में संरेखित करता है। लाइन्स के बीच कोई अतिरिक्त स्पेस नहीं होता। उदाहरण: center के साथ फ्लेक्स लाइन्स केंद्रित कंटेनर की ऊंचाई 200px है। सभी 8 आइटम्स 2-2 की 4 लाइन्स में रैप होते हैं,

align-items: flex-end फ्लेक्स आइटम्स को क्रॉस-एक्सिस के अंत (end) में संरेखित करता है। Row दिशा में यह आइटम्स को **नीचे** (बॉटम) संरेखित करता है। उदाहरण: flex-end के साथ बॉटम संरेखण कंटेनर की ऊंचाई 300px है। सभी आइटम्स नीचे संरेखित हैं, उनकी मूल ऊंचाई (60px) बनी रहती है। <!DOCTYPE html> <

align-items: stretch (डिफ़ॉल्ट मान) फ्लेक्स आइटम्स को क्रॉस-एक्सिस पर कंटेनर की पूरी ऊंचाई भरने के लिए फैलाता है, जब तक कि आइटम पर क्रॉस-आकार (height/width) स्पष्ट रूप से सेट न हो। उदाहरण: stretch के साथ फ्लेक्स आइटम्स कंटेनर की ऊंचाई 200px है। आइटम्स पर कोई ऊंचाई सेट नहीं है, इसलिए वे पूरी 200px ऊ

align-content प्रॉपर्टी मल्टी-लाइन फ्लेक्स कंटेनर (जब flex-wrap: wrap हो) में फ्लेक्स लाइन्स के क्रॉस-एक्सिस पर संरेखण और स्पेस वितरण को नियंत्रित करती है। उदाहरण: align-content: space-between कंटेनर की निश्चित ऊंचाई (150px) है। पहली लाइन ऊपर, अंतिम लाइन नीचे, बीच की लाइन्स में समान स्पेस। <!DO

flex-flow शॉर्टहैंड प्रॉपर्टी flex-direction और flex-wrap को एक ही घोषणा में सेट करती है। यह फ्लेक्स कंटेनर के प्रवाह को परिभाषित करने का संक्षिप्त तरीका है। उदाहरण: flex-flow: column wrap आइटम्स वर्टिकल कॉलम में व्यवस्थित होते हैं और आवश्यकतानुसार रैप होते हैं। <!DOCTYPE html> <html>

order प्रॉपर्टी फ्लेक्स आइटम्स के दृश्य क्रम (visual order) को बदलती है बिना HTML मार्कअप बदले। डिफ़ॉल्ट मान 0 है; ऋणात्मक मान पहले, धनात्मक मान बाद में आते हैं। उदाहरण: order से क्रम बदलना आइटम्स को HTML में Q1-Q8 क्रम में लिखा गया है, लेकिन order प्रॉपर्टी से उन्हें Q4, Q3, Q7, Q6, Q8, Q2, Q5, Q1

flex-direction: column फ्लेक्स आइटम्स को मुख्य अक्ष (मेन एक्सिस) पर ऊपर से नीचे वर्टिकल रूप से व्यवस्थित करता है। क्रॉस एक्सिस हॉरिजॉन्टल हो जाता है। उदाहरण: column दिशा में फ्लेक्स आइटम्स <!DOCTYPE html> <html> <head> <style> .mycontainer { display: flex;

flex शॉर्टहैंड प्रॉपर्टी flex-grow, flex-shrink, और flex-basis को एक ही घोषणा में सेट करती है। यह फ्लेक्स आइटम्स के आकार नियंत्रण का सबसे सामान्य तरीका है। उदाहरण: flex शॉर्टहैंड का उपयोग Q4 के लिए flex: 20 0 350px सेट किया गया है: ग्रो फैक्टर 20, श्रिंक नहीं, बेसिस 350px। <!DOCTYPE html> &l

flex-direction: row (डिफ़ॉल्ट मान) फ्लेक्स आइटम्स को मुख्य अक्ष (मेन एक्सिस) पर बाएं से दाएं हॉरिजॉन्टल रूप से व्यवस्थित करता है। उदाहरण: row दिशा में फ्लेक्स आइटम्स <!DOCTYPE html> <html> <head> <style> .mycontainer { display: flex; flex-direction: row;

justify-content प्रॉपर्टी फ्लेक्स कंटेनर के मेन एक्सिस (मुख्य अक्ष) पर फ्लेक्स आइटम्स के संरेखण और स्पेस वितरण को नियंत्रित करती है। उदाहरण: justify-content: center सभी फ्लेक्स आइटम्स को हॉरिजॉन्टल रूप से केंद्र में संरेखित किया गया है। <!DOCTYPE html> <html> <head> <style&g

इमेज के ठीक केंद्र में बटन रखने के लिए position: absolute के साथ transform: translate(-50%, -50%) तकनीक का उपयोग करें। यह सबसे विश्वसनीय सेंटरिंग विधि है। उदाहरण: इमेज के केंद्र में बटन <!DOCTYPE html> <html> <head> <style> .box { position: relative; width

flex-grow प्रॉपर्टी निर्धारित करती है कि फ्लेक्स आइटम उपलब्ध अतिरिक्त स्थान (free space) का कितना हिस्सा लेगा। मान एक संख्या (यूनिटलेस) होती है जो अनुपात दर्शाती है। उदाहरण: Q3 को अन्य आइटम्स से बड़ा बनाना Q3 का flex-grow: 20 है, जबकि अन्य का flex-grow: 1 है। Q3 को 20 गुना अधिक स्थान मिलेगा। <!

align-items प्रॉपर्टी फ्लेक्स कंटेनर में सभी फ्लेक्स आइटम्स के क्रॉस-एक्सिस (लंबवत अक्ष) पर संरेखण को नियंत्रित करती है। यह सिंगल-लाइन फ्लेक्स कंटेनर के लिए काम करती है। उदाहरण: align-items: center कंटेनर की निश्चित ऊंचाई (150px) है, और आइटम्स को align-items: center से वर्टिकली केंद्र में संरेखित क