CSS में फ्लेक्स एलिमेंट्स

हमारे द्वारा अध्ययन किए गए ब्लॉक मॉडल प्रकारों के अलावा एक और है - फ्लेक्स एलिमेंट्स। इन्हें प्राप्त करने के लिए, इन एलिमेंट्स के पैरेंट को display प्रॉपर्टी flex वैल्यू के साथ सेट करना होगा। पैरेंट स्वयं एक ब्लॉक एलिमेंट बना रहेगा, लेकिन इसके चिल्ड्रन फ्लेक्स एलिमेंट बन जाएंगे।

फ्लेक्स एलिमेंट्स, ब्लॉक एलिमेंट्स की तरह ही चौड़ाई और ऊंचाई, margin और padding रख सकते हैं। हालांकि, ब्लॉक एलिमेंट्स के विपरीत, डिफ़ॉल्ट रूप से फ्लेक्स एलिमेंट्स अपने पैरेंट के अंदर एक पंक्ति में व्यवस्थित हो जाते हैं।

आइए कोशिश करते हैं:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
</div>

.parent {
	display: flex; /* चिल्ड्रन फ्लेक्स एलिमेंट बन जाएंगे */
	width: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 50px;
	height: 50px;
	border: 1px solid green;
}