Để tạo bố cục Flexbox trong HTML, dùng CSS Flexbox. Website thường có nhiều cột để hiển thị nội dung. Flexbox là một trong các cách tạo bố cục đa cột hiện đại.
Flexbox được giới thiệu trong CSS3. Bố cục này giúp điều chỉnh kích thước màn hình và hiển thị đúng trên nhiều thiết bị. Với việc thu gọn lề (margin collapse), Flexbox không bị thu gọn. Nó tự điều chỉnh theo kích thước màn hình.
Ví dụ: Không dùng Flexbox
<!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>
Dưới đây là bố cục Flexbox, dễ dàng tạo được. Khi resize trang, bố cục điều chỉnh theo nhiều màn hình thiết bị:
Ví dụ: Bố cục Flexbox hoàn chỉnh
<!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>