คุณสมบัติ flex-wrap

คุณสมบัติ flex-wrap กำหนดการจัดวางบล็อกหลายบรรทัด ตามแกนหลัก ใช้กับองค์ประกอบแม่สำหรับ บล็อกแบบ flex เป็นส่วนหนึ่งของคุณสมบัติแบบย่อ flex-flow

ไวยากรณ์

เซเล็กเตอร์ {
	flex-wrap: nowrap | wrap | wrap-reverse;
}

ค่า

ค่า	คำอธิบาย
`nowrap`	โหมดบรรทัดเดียว - บล็อกจะเรียงเป็นแถวเดียว
`wrap`	บล็อกจะเรียงเป็นหลายบรรทัด หากไม่พอดีในบรรทัดเดียว
`wrap-reverse`	เหมือนกับ `wrap` แต่บล็อกจะเรียงลำดับในทิศทางตรงกันข้าม (เริ่มจากอันสุดท้ายไปหาอันแรก)

ค่าเริ่มต้น: nowrap

ตัวอย่าง ค่า wrap

ตอนนี้บล็อกไม่พอดีกับคอนเทนเนอร์ และจะเรียงเป็นหลายบรรทัด:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-between;
	border: 1px solid #696989;
	height: 200px;
	width: 330px;
	margin: auto;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

ตัวอย่าง ค่า wrap-reverse

และตอนนี้ลำดับจะเปลี่ยนเป็น ย้อนกลับ (ดูตัวเลขภายในบล็อก):

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: flex;
	flex-wrap: wrap-reverse;
	flex-direction: row;
	justify-content: space-between;
	border: 1px solid #696989;
	height: 200px;
	width: 330px;
	margin: auto;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

ตัวอย่าง ค่า nowrap

ตอนนี้บล็อกจะอยู่ในโหมดบรรทัดเดียว (ค่าเริ่มต้น) ในกรณีนี้ค่า ความกว้าง width สำหรับบล็อกจะถูกละเว้น หากมันทำให้บล็อกไม่พอดีกับคอนเทนเนอร์แม่ โปรดสังเกตว่าบล็อกพอดี กับคอนเทนเนอร์แม่ แต่ความกว้างจริงของมันไม่ใช่ 100px ตามที่กำหนดไว้ แต่แคบกว่า:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: space-between;
	border: 1px solid #696989;
	height: 200px;
	width: 330px;
	margin: auto;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

ตัวอย่าง ค่า nowrap

อย่างไรก็ตาม หากบล็อกพอดีกับความกว้าง ที่กำหนดให้ - คุณสมบัติ width จะไม่ ถูกละเว้น ลองลดจำนวนบล็อก ให้พอดีทั้งหมด:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: space-between;
	border: 1px solid #696989;
	height: 200px;
	width: 330px;
	margin: auto;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

ดูเพิ่มเติม

คุณสมบัติ flex-direction
ซึ่งกำหนดทิศทางของแกนสำหรับบล็อกแบบ flex
คุณสมบัติ justify-content
ซึ่งกำหนดการจัดตำแหน่งตามแกนหลัก
คุณสมบัติ align-items
ซึ่งกำหนดการจัดตำแหน่งตามแกนขวาง
คุณสมบัติ flex-flow
แบบย่อสำหรับ flex-direction และ flex-wrap
คุณสมบัติ order
ซึ่งกำหนดลำดับของบล็อกแบบ flex
คุณสมบัติ align-self
ซึ่งกำหนดการจัดตำแหน่งของบล็อกเดียว
คุณสมบัติ flex-basis
ซึ่งกำหนดขนาดของบล็อก flex เฉพาะ
คุณสมบัติ flex-grow
ซึ่งกำหนดความ "โลภ" ของบล็อกแบบ flex
คุณสมบัติ flex-shrink
ซึ่งกำหนดการหดตัวของบล็อกแบบ flex
คุณสมบัติ flex
แบบย่อสำหรับ flex-grow, flex-shrink และ flex-basis