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