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

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

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

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

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

Post by abdkode » 29/03/2019 6:07 pm

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

รูปแบบ syntax

Code: Select all

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

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

Code: Select all

<!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>					 
ผลลัพธ์ที่ได้
Image

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

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

Code: Select all

<!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>					 
ผลลัพธ์
Image
ผลลัพธ์ที่ได้จะอยู่ในบรรทัดเดียวทั้งแม้ว่าจะกำหนดความยาวแล้วก็ตาม ดังนั้นการใช้ flex-wrap property จะแตกต่ากันขึ้นอยู่กับค่าของ property ที่เรากำหนดจะเป็น wrap หรือ nowrap แล้วแต่จุดประสงค์ที่ต้องาร

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : 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 8 guests