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

ตอบกระทู้

รูปแสดงอารมณ์
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
รูปแสดงอารมณ์อื่นๆ
BBCode เปิด
[img] เปิด
[url] เปิด
[Smile icon] เปิด
กระทู้แนะนำ
   

มุมมองที่ขยายได้ กระทู้แนะนำ: CSS Tips: การใช้ margin กับ flexbox

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

โดย abdkode » 03/04/2019 2:53 pm

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

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

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

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

ข้างบน