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

คุณสมบัติ flex-shrink กำหนดว่า flex-block จะลดขนาดลงมากน้อยเพียงใดเทียบกับ องค์ประกอบข้างเคียงภายใน flex-container ในกรณีที่มีพื้นที่ว่างไม่เพียงพอ

ตัวอย่างเช่น หาก flex-block ทั้งหมดภายใน flex-container มี flex-shrink:1 พวกมันจะมี ขนาดเท่ากัน หากหนึ่งในนั้นมี flex-shrink:2 มันจะเล็กกว่า ที่เหลือทั้งหมด 2 เท่า

นำไปใช้กับ: flex block เฉพาะ

คุณสมบัตินี้เป็นส่วนหนึ่งของคุณสมบัติแบบย่อ flex

ไวยากรณ์

selector {
	flex-shrink: positive number;
}

ค่าดั้งเดิม: 1

ตัวอย่าง

สมมติว่ามีองค์ประกอบ 3 ช่อง แต่ละช่องมี ความกว้าง 200px และรวมกันได้ 600px ซึ่งมากกว่าความกว้างของคอนเทนเนอร์หลัก ซึ่ง เท่ากับ 350px:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem3">3</div>
</div>

.parent {
	display: flex;
	width: 350px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 200px;
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	flex-shrink: 1;
}
.elem2 {
	flex-shrink: 2;
}
.elem3 {
	flex-shrink: 3;
}

มาคำนวณพื้นที่ว่างเชิงลบ ตามสูตร:

600px - 350px = 250px

ความกว้างโดยรวมถ่วงน้ำหนักขององค์ประกอบ โดยคำนึงถึงค่าของคุณสมบัติ flex-shrink สำหรับแต่ละองค์ประกอบจะเท่ากับ:

200px * 1 + 200px * 2 + 200px * 3 = 1200px

ทีนี้มากำหนดว่าองค์ประกอบแรกจะหดลง เท่าใด:

250px * 1 (flex-shrink) * 200 (width) / 1200 = 41,6px

องค์ประกอบที่สอง:

250px * 2 (flex-shrink) * 200 (width) / 1200 = 83,3px

องค์ประกอบที่สาม:

250px * 3 (flex-shrink) * 200 (width) / 1200 = 125px

ปรากฏว่าองค์ประกอบที่สาม ซึ่งมีค่า flex-shrink เท่ากับ 3 จะหดลงมากกว่า องค์ประกอบอื่นๆ

ดูเพิ่มเติม

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