ในการสร้างเค้าโครง flexbox ใน HTML ให้ใช้ CSS Float เว็บไซต์มีหลายคอลัมน์เพื่อแสดงเนื้อหา CSS Float เป็นวิธีการหนึ่งในการสร้างเค้าโครงหลายคอลัมน์
แนะนำเลย์เอาต์ Flexbox ใน CSS3 เลย์เอาต์นี้ช่วยในการปรับขนาดหน้าจอและแสดงผลอย่างถูกต้องบนอุปกรณ์แสดงผลหลายเครื่อง ด้วยการยุบขอบของเนื้อหา flexbox จะไม่ยุบ ปรับตามขนาดหน้าจอ
ตัวอย่าง
ต่อไปนี้ไม่ใช้เลย์เอาต์ 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>
นี่คือเลย์เอาต์ flexbox ซึ่งคุณสามารถสร้างได้ง่ายๆ ในการปรับขนาดหน้า จะมองเห็นสิ่งต่อไปนี้ หน้าจะปรับตามหน้าจออุปกรณ์หลายเครื่อง -
ตัวอย่าง
คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อสร้างรูปแบบที่ยืดหยุ่นด้านบนใน 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> 