CSS Tips: การใช้ margin กับ flexbox

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderators: mindphp, ผู้ดูแลกระดาน

abdkode
PHP Super Member
PHP Super Member
Posts: 362
Joined: 07/01/2019 9:56 am

CSS Tips: การใช้ margin กับ flexbox

Post by abdkode » 03/04/2019 2:53 pm

Flexbox เป็นหนึ่งสิ่งหนึ่งที่สนใจและน่าใช้ใน CSS การใช้ Auto Margins เมื่อเราระบุ margin เป็น auto ในทิศทางใด จะเห็นว่ามันจะเริ่มปรากฎด้วยการครอบครองพื้นที่ว่างในทิศทางนั้น ๆ เช่นเราระบุ margin-left: auto จะทำให้เกิดการจองพื้นที่ด้านซ้ายไว้

เราต้องการสร้าง navbar ให้เมนูส่วนอื่นอยู่ชิดซ้ายเว้นปุ่มลอคอินที่ให้อยู่ชิดขวา เราสามารถใช้ auto margins แก้ปัญหานี้ได้ ดังนี้

Code: Select all

<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
flexbox-1.jpg (6.19 KiB) Viewed 551 times
จากผลลัพธ์ เรากำหนดให้ box3 เป็น margin-left: auto; จะทำให้ชิดขวานั้นเอง

และจากบทความก่อนหน้านี้ viewtopic.php?f=73&t=55792 ซึ่งเป็นการทำให้กล่องทั้งหมดจะอยู่ตรงกลาง
Image
หากเราต้องการให้อีลีเมนต์ต่าง ๆ อยู่กลางจอด้วยและกระจายตามแนวนอนด้วย เราไม่ต้องมานั่งใส่ justify-content และ align-items ให้วุ่นวายอีกต่อไป เพียงใช้ margin: auto ก็ได้ดังนี้

Code: Select all

<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
flexbox-auto mg.jpg (4.33 KiB) Viewed 551 times
จากผลลัพธ์จะเห็นได้ว่า กล่องทั้งหมดจะอยู่ตรงกลางของ อีลีเมนต์นั้นและระยะห่างกันระหว่างซ้ายและขวาเท่ากัน เราสามารถนำไปประยุกต์ใช้กันได้น่ะครับ อาจจะนำ javascriptหรือ JQuery เป็นการสร้างให้เคลื่อนไหว้ได้เป็นต้น

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : HTML & CSS
-สอนการใช้งาน HTML & CSS
-ถามตอบ HTML CSS
-บทเรียน CSS
-บทเรียน HTML5
-แลกเปลี่ยนความรู้ PHP

  • Similar Topics
    Replies
    Views
    Last post

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 7 guests