Để tạo bố cục flexbox trong HTML, hãy sử dụng CSS Float. Các trang web có nhiều cột để hiển thị nội dung. CSS Float là một trong những cách để bố trí nhiều cột.
Bố cục 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ị chính xác trên nhiều thiết bị hiển thị. Với việc thu gọn lề nội dung, hộp uốn không thu gọn. Nó điều chỉnh theo kích thước màn hình.
Ví dụ
Phần sau không sử dụng bố cục 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>
Đây là bố cục flexbox mà bạn có thể dễ dàng tạo. Khi thay đổi kích thước trang, thông tin sau sẽ hiển thị. Trang điều chỉnh theo nhiều màn hình thiết bị -
Ví dụ
Bạn có thể thử chạy mã sau để tạo bố cục linh hoạt ở trên trong 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>