CSS Tips: flex-wrap การบีบ item ให้เหมาะสมกับตำแหน่ง

ตอบกระทู้

รูปแสดงอารมณ์
: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: flex-wrap การบีบ item ให้เหมาะสมกับตำแหน่ง

CSS Tips: flex-wrap การบีบ item ให้เหมาะสมกับตำแหน่ง

โดย abdkode » 29/03/2019 6:07 pm

ใน CSS ยังมีลูกเล่นมากมายให้ได้ลองกัน บทความนี้จะพูดถึง flex-wrap ว่าเป็นอย่างไร
flex-wrap ถูกใช้เพื่อระบุว่าไอเท็ม flex (flex items)ถูกบังคับให้อยู่ในบรรทัดเดียวหรือหลายบรรทัด การกำหนด property flex-wrap ช่วยให้สามารถควบคุมทิศทางในการวางแนวของวัตถุได้ มันถูกใช้เพื่อกำหนดรูปแบบบรรทัดเดียวหรือหลายบรรทัดเพื่อสร้างรูปการจัดวางภายใน flex container ได้อย่างยืดหยุ่น

รูปแบบ syntax

โค้ด: เลือกทั้งหมด

flex-wrap: nowrap | wrap | wrap-reverse | initial;
Values of flex-wrap property ค่าที่ใช้กำหนด property ของ flex-wrap ดังนี้:
1. wrap: คุณสมบัตินี้ใช้เพื่อแบ่งไอเท็มเฟล็กออกเป็นหลายบรรทัด มันทำให้ไอเท็มจะอยู่ได้หลายบรรทัดตามความกว้างของ element ที่กำหนด

ตัวอย่างโค้ด การใช้ flex-wrap: wrap;

โค้ด: เลือกทั้งหมด

<!DOCTYPE html> 
<head> 
	<title>flex-wrap property</title> 
	<style> 
		#main { 
			width: 400px; 
			height: 300px; 
			border: 5px solid black; 
			display: flex; 
			flex-wrap: wrap; 
		} 
		
		#main div { 
			width: 100px; 
			height: 50px; 
		} 
		h1 { 
			color:navy; 
			font-size:42px; 
			margin-left:50px; 
		} 
		h3 { 
			margin-top:-20px; 
			margin-left:50px; 
		} 
	</style> 
</head> 
<body> 
	<h1>Mindphp</h1> 
	<h3>The flex-wrap:wrap property</h3> 
	<div id="main"> 
		<div style="background-color:#009900;">1</div> 
		<div style="background-color:#00cc99;">2</div> 
		<div style="background-color:#0066ff;">3</div> 
		<div style="background-color:#66ffff;">4</div> 
		<div style="background-color:#660066;">5</div> 
		<div style="background-color:#663300;">6</div> 
	</div> 
</body> 
</html>					 
ผลลัพธ์ที่ได้
รูปภาพ

2. nowrap:ค่าเริ่มต้นของ wrap-flex คือ nowrap มันถูกใช้เพื่อระบุว่าตัวไอเท็มจะไม่มีการตัดไปบรรทัดใหม่ มันทำให้อยู่ในบรรทัดเดียวทั้งหมด

ตัวอย่างโค้ด การใช้ flex-wrap: nowrap;

โค้ด: เลือกทั้งหมด

<!DOCTYPE html> 
<head> 
	<title>flex-wrap property</title> 
	<style> 
		#main { 
			width: 400px; 
			height: 300px; 
			border: 5px solid black; 
			display: flex; 
			flex-wrap: nowrap; 
		} 
		
		#main div { 
			width: 100px; 
			height: 50px; 
		} 
		h1 { 
			color:navy; 
			font-size:42px; 
			margin-left:50px; 
		} 
		h3 { 
			margin-top:-20px; 
			margin-left:50px; 
		} 
	</style> 
</head> 
<body> 
	<h1>Mindphp</h1> 
	<h3>The flex-wrap:nowrap property</h3> 
	<div id="main"> 
		<div style="background-color:#009900;">1</div> 
		<div style="background-color:#00cc99;">2</div> 
		<div style="background-color:#0066ff;">3</div> 
		<div style="background-color:#66ffff;">4</div> 
		<div style="background-color:#660066;">5</div> 
		<div style="background-color:#663300;">6</div> 
	</div> 
</body> 
</html>					 
ผลลัพธ์
รูปภาพ
ผลลัพธ์ที่ได้จะอยู่ในบรรทัดเดียวทั้งแม้ว่าจะกำหนดความยาวแล้วก็ตาม ดังนั้นการใช้ flex-wrap property จะแตกต่ากันขึ้นอยู่กับค่าของ property ที่เรากำหนดจะเป็น wrap หรือ nowrap แล้วแต่จุดประสงค์ที่ต้องาร

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

ข้างบน