ปัจจัยการหดตัวของบล็อก Flex ใน CSS

ในบทเรียนที่แล้ว เราได้ทราบว่าเมื่อ องค์ประกอบ flex ไม่มีพื้นที่เพียงพอ พวกมันจะเริ่ม หดตัว ขนาดที่ความกว้างรวม มากกว่าความกว้างของ parent เรียกว่า พื้นที่ว่างเชิงลบ (negative free space)

ในทางเทคนิค การหดตัวหมายความว่าความกว้าง ของแต่ละองค์ประกอบถูกตัดออกไป一部分 เพื่อให้องค์ประกอบทั้งหมดสามารถใส่ลงใน parent ของมันได้

ลองมาคำนวณกัน สมมติว่า เรามีองค์ประกอบ 4 องค์ประกอบ ความกว้าง 200px และความกว้างของ parent คือ 700px ซึ่งหมายความว่าความกว้างรวม ขององค์ประกอบคือ:

200px * 4 = 800px

ความกว้างนี้มากกว่าความกว้างของ parent อยู่ 100px ลองคำนวณดูว่าแต่ละองค์ประกอบต้องถูกตัดออกไปเท่าไหร่ เพื่อให้องค์ประกอบทั้งหมดสามารถใส่ลงใน parent ได้:

100px / 4 = 25px

นั่นคือความกว้างขององค์ประกอบจะเป็น:

200px - 25px = 175px

ให้สร้างบล็อกตามที่อธิบายและตรวจสอบด้วยการวัด ว่าความกว้างขององค์ประกอบนั้น เท่ากับที่เราคำนวณไว้จริงหรือไม่

คำนวณความกว้างของบล็อก จากนั้นตรวจสอบ ผลการคำนวณด้วยการวัด:

<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: 200px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 100px;
}
.elem2 {
	width: 100px;
}
.elem3 {
	width: 100px;
}