CSS Flexbox म्हणजे काय?
CSS Flexbox (Flexible Box Layout) हे एका पंक्ती किंवा स्तंभात जागा वाटप करण्यासाठी आणि आयटम संरेखित करण्यासाठी एक-आयामी मांडणी मॉडेल आहे. flex कंटेनर display: flex ने परिभाषित केले जाते आणि त्याचे थेट मुले flex आयटम बनतात. मुख्य कंटेनर गुणधर्म: flex-direction (पंक्ती किंवा स्तंभ), flex-wrap (एकल vs. बहु-ओळ), justify-content (मुख्य-अक्ष संरेखन), align-items (प्रत्येक ओळीसाठी क्रॉस-अक्ष संरेखन), आणि align-content (अनेक ओळींचे क्रॉस-अक्ष संरेखन). मुख्य आयटम गुणधर्म: flex-grow (आयटम किती वाढतो), flex-shrink (किती कमी होतो), flex-basis (प्रारंभिक आकार), आणि align-self (विशिष्ट आयटमसाठी कंटेनरचे align-items ओव्हरराईड करते). Flexbox नेव्हिगेशन बार, कार्ड पंक्ती, केंद्रित मांडणी आणि कोणत्याही एक-आयामी व्यवस्थेसाठी आदर्श आहे.
CSS Flexbox जनरेटर कसा वापरावा
-
ड्रॉपडाउन आणि इनपुट वापरून कंटेनर गुणधर्म (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) समायोजित करा.
-
निवडण्यासाठी प्रीव्ह्यूमधील कोणत्याही आयटमवर क्लिक करा (नारंगी होतो).
-
आयटम पॅनेलमध्ये निवडलेल्या आयटमचे flex-grow, flex-shrink, flex-basis आणि align-self सेट करा.
-
अधिक आयटम जोडण्यासाठी '+ आयटम जोडा' वर क्लिक करा; निवडलेला आयटम हटवण्यासाठी 'काढा' वर क्लिक करा.
-
निर्माण केलेला कोड पाहण्यासाठी CSS आणि HTML टॅबमध्ये स्विच करा, नंतर कॉपी करा वर क्लिक करा.
-
डीफॉल्ट 3-आयटम मांडणीसह पुन्हा सुरू करण्यासाठी 'सर्व रीसेट करा' वर क्लिक करा.