HTML में फ्लेक्सबॉक्स लेआउट बनाने के लिए, CSS फ्लोट का उपयोग करें। सामग्री दिखाने के लिए वेबसाइटों में कई कॉलम होते हैं। सीएसएस फ्लोट बहु-स्तंभ लेआउट के तरीकों में से एक है।
Flexbox लेआउट CSS3 में पेश किया गया। यह लेआउट स्क्रीन के आकार को समायोजित करने और कई डिस्प्ले उपकरणों पर सही ढंग से प्रदर्शित होने में मदद करता है। सामग्री के एक मार्जिन के पतन के साथ, फ्लेक्सबॉक्स ढहता नहीं है। यह स्क्रीन के आकार के अनुसार समायोजित होता है।
उदाहरण
निम्न फ्लेक्सबॉक्स लेआउट का उपयोग किए बिना है
<!DOCTYPE html> <html> <head></head> <body> <div class="mycontent"> <header> <h1>Tutorialspoint.com</h1> <h3>Simply Easy Learning</h3> </header> <nav> <ul> <li><a href="/tutorialslibrary.htm">Tutorials Library</a></li> <li><a href="/videotutorials/index.htm">Video Tutorials</a></li> <li><a href="/codingground.htm">Coding Ground</a></li> <li><a href="/tutor_connect/index.php">Tutor Connect</a></li> <li><a href="/online_dev_tools.htm">Tools</a></li> </ul> </nav> <article> <h1>About Us</h1> <p>This is demo content.</p> <p>This is demo content.</p> <p>This is demo content.</p> <p>This is demo content.</p> </article> <footer>Add the footer content here</footer> </div> </body> </html>
यहां फ्लेक्सबॉक्स लेआउट है, जिसे आप आसानी से बना सकते हैं। पृष्ठ का आकार बदलने पर, निम्नलिखित दिखाई देता है। पेज कई डिवाइस स्क्रीन के अनुसार एडजस्ट होता है -
उदाहरण
आप ऊपर दिए गए लचीले लेआउट को HTML में बनाने के लिए निम्न कोड को चलाने का प्रयास कर सकते हैं
<!DOCTYPE html>
<html>
<head>
<style>
.flexmycontent {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
text-align: center;
}
.flexmycontent > * {
padding: 15px;
-webkit-flex: 1 100%;
flex: 1 100%;
}
.article {
text-align: left;
}
header {background: #FAFAFA;color:green;}
footer {background: #FAFAFA;color:green;}
.nav {background:#eee;}
.nav ul {
list-style-type: none;
padding: 0;
}
.nav ul a {
text-decoration: none;
}
@media all and (min-width: 768px) {
.nav {text-align:left;-webkit-flex: 1 auto;flex:1 auto;-webkit-order:1;order:1;}
.article {-webkit-flex:5 0px;flex:5 0px;-webkit-order:2;order:2;}
footer {-webkit-order:3;order:3;}
}
</style>
</head>
<body>
<div class="flexmycontent">
<header>
<h1>Tutorialspoint.com</h1>
<h3>Simply Easy Learning</h3>
</header>
<nav class ="nav">
<ul>
<li><a href="/tutorialslibrary.htm">Tutorials Library</a></li>
<li><a href="/videotutorials/index.htm">Video Tutorials</a></li>
<li><a href="codingground.htm">Coding Ground</a></li>
<li><a href="/tutor_connect/index.php">Tutor Connect</a></li>
<li><a href="/online_dev_tools.htm">Tools</a></li>
</ul>
</nav>
<article class="article">
<h1>About Us</h1>
<p>This is demo content.</p>
<p>This is demo content.</p>
<p>This is demo content.</p>
<p>This is demo content.</p>
</article>
<footer>Add the footer content here</footer>
</div>
</body>
</html>