HTML এ একটি ফ্লেক্সবক্স লেআউট তৈরি করতে, CSS ফ্লোট ব্যবহার করুন। বিষয়বস্তু দেখানোর জন্য ওয়েবসাইটগুলিতে একাধিক কলাম রয়েছে৷ সিএসএস ফ্লোট মাল্টি-কলাম লেআউটের অন্যতম উপায়।
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> 