เราต้องการสร้าง navbar ให้เมนูส่วนอื่นอยู่ชิดซ้ายเว้นปุ่มลอคอินที่ให้อยู่ชิดขวา เราสามารถใช้ auto margins แก้ปัญหานี้ได้ ดังนี้
โค้ด: เลือกทั้งหมด
<html>
<head>
<style>
#container {
display: flex;
background: #e8eaed;
height: 200px;
}
.box {
width: 50px;
height: 50px;
padding: 0 10px;
line-height: 50px;
background: #434A54;
color: #F5F7FA;
border: 1px solid #CCD1D9;
text-align: center;
}
#box3 {
margin-left: auto;
}
</style>
</head>
<body>
<div id="container">
<div class="box" id="box1">Articles</div>
<div class="box" id="box2">Courses</div>
<div class="box" id="box3">Login</div>
</div>
</body>
</html>- flexbox-1.jpg (6.19 KiB) Viewed 1338 times
และจากบทความก่อนหน้านี้ viewtopic.php?f=73&t=55792 ซึ่งเป็นการทำให้กล่องทั้งหมดจะอยู่ตรงกลาง
หากเราต้องการให้อีลีเมนต์ต่าง ๆ อยู่กลางจอด้วยและกระจายตามแนวนอนด้วย เราไม่ต้องมานั่งใส่ justify-content และ align-items ให้วุ่นวายอีกต่อไป เพียงใช้ margin: auto ก็ได้ดังนี้
โค้ด: เลือกทั้งหมด
<html>
<head>
<style>
#container {
display: flex;
background: #37BC9B;
height: 200px;
}
.box {
width: 50px;
height: 50px;
line-height: 50px;
background: #434A54;
color: #F5F7FA;
border: 1px solid #CCD1D9;
text-align: center;
margin: auto;
}
</style>
</head>
<body>
<div id="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
</body>
</html>
- flexbox-auto mg.jpg (4.33 KiB) Viewed 1338 times
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : HTML & CSS
-สอนการใช้งาน HTML & CSS
-ถามตอบ HTML CSS
-บทเรียน CSS
-บทเรียน HTML5
-แลกเปลี่ยนความรู้ PHP