ความโลภเป็นศูนย์ขององค์ประกอบ Flex ใน CSS

หาก flex-grow มีค่าเป็นศูนย์สำหรับองค์ประกอบใด ๆ องค์ประกอบนั้นจะไม่เข้าร่วมในการกระจายพื้นที่ว่าง โดยค่าเริ่มต้น ความโลภมีค่าเป็นศูนย์อยู่แล้ว และนั่นคือสาเหตุที่องค์ประกอบที่ไม่มีการกำหนด flex-grow จะไม่แบ่งปันพื้นที่ว่าง ระหว่างกัน

ลองมาคำนวณตัวอย่างกัน สมมติว่าเรามีองค์ประกอบ flex สามตัว แต่ละตัวมีความกว้าง 100px ให้องค์ประกอบแรก ไม่มี flex-grow (หรือมีค่าเป็น 0) องค์ประกอบที่สองมี flex-grow เท่ากับ 2 และองค์ประกอบที่สาม - เท่ากับ 3

ให้ความกว้างของ parent เท่ากับ 500px จากนั้นพื้นที่ว่างจะเท่ากับ 200px และหนึ่งหน่วยของ flex-grow จะได้ 200px / 5 = 40px ผลลัพธ์คือความกว้าง ขององค์ประกอบแรกจะยังคงเป็น 100px เนื่องจากไม่เข้าร่วมในการกระจาย ความกว้างขององค์ประกอบที่สองจะเป็น 100px + 2 * 40px = 180px และความกว้างขององค์ประกอบที่สาม - 100px + 3 * 40px = 220px

โจทย์ปฏิบัติ

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

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

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

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

.parent {
	display: flex;
	width: 700px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 200px;
	flex-grow: 0;
}
.elem2 {
	width: 200px;
	flex-grow: 0;
}
.elem3 {
	width: 100px;
	flex-grow: 1;
}
.elem4 {
	width: 100px;
	flex-grow: 1;
}