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

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

ตัวอย่างเช่น หากบล็อก flex ทั้งหมดภายในคอนเทนเนอร์ flex มี flex-grow:1 พวกมันจะมีขนาด เท่ากัน หากหนึ่งในนั้นมี flex-grow:2 มันจะใหญ่เป็น 2 เท่า เมื่อเทียบกับ บล็อกอื่นทั้งหมด

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

ใช้กับ: บล็อก flex เฉพาะ

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

ไวยากรณ์

selector {
	flex-grow: positive number;
}

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

ตัวอย่าง

ตอนนี้เรามีบล็อก flex สองบล็อกที่มีความกว้าง 100px ความกว้างรวมขององค์ประกอบ 200px ส่วนความกว้างของ parent คือ 300px หมายความว่ายังเหลือพื้นที่ว่าง 100px

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

ตัวอย่างเช่น ให้องค์ประกอบแรกมี flex-grow เท่ากับ 1 และองค์ประกอบที่สอง - 3 มาลอง คำนวณดูว่าแต่ละองค์ประกอบจะได้พื้นที่ว่าง ส่วนเท่าใด

ก่อนอื่นต้องหาจำนวนหน่วย flex-grow รวมทั้งหมดขององค์ประกอบของเรา องค์ประกอบแรกมีค่า 1 และ องค์ประกอบที่สองมี 3 นั่นหมายความว่าผลรวม คือ 4

จากนั้นหารพื้นที่ว่าง 100px ด้วย 4 จะได้ว่า 25px ต่อ หนึ่งหน่วย flex-grow ดังนั้น องค์ประกอบแรกจะเพิ่มหนึ่งหน่วย flex-grow นั่นคือ 25px ส่วน องค์ประกอบที่สอง - สามหน่วย นั่นคือ 75px

ความกว้างขององค์ประกอบแรกจะได้เป็น 125px และองค์ประกอบที่สอง - 175px

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

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

ตัวอย่าง

ให้ความกว้างของ parent เท่ากับ 400px ความกว้างขององค์ประกอบแรก 200px และความกว้าง ขององค์ประกอบที่สอง - 100px ดังนั้น พื้นที่ว่าง เท่ากับ 100px เช่นเดิม

ลองกำหนด flex-grow ให้กับแต่ละองค์ประกอบ เท่ากับ 1 ผลรวมจะได้ 2 นั่นคือ 100px ของพื้นที่ว่าง ต้องหารด้วย 2 ดังนั้น 50px ต่อหนึ่ง หน่วยของความโลภ

เนื่องจากทุกองค์ประกอบมีค่า flex-grow เท่ากัน องค์ประกอบทุกอันจะเพิ่ม ค่าเท่ากันคือ 50px นั่นหมายความว่า องค์ประกอบแรกจะกลายเป็น 250px และ องค์ประกอบที่สองจะกลายเป็น 150px

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

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

ตัวอย่าง

ให้ความกว้างของ parent เท่ากับ 400px อีกครั้ง ความกว้างขององค์ประกอบแรก 200px และความกว้าง ขององค์ประกอบที่สอง - 100px

คราวนี้ให้ตั้งค่า flex-grow ขององค์ประกอบแรกเป็น 3 และองค์ประกอบที่สอง - เป็น 1 ดังนั้นผลรวมของความโลภ คือ 4 ดังนั้นหนึ่งหน่วย ความโลภเท่ากับ 100px / 4 = 25px

องค์ประกอบแรกจะเพิ่ม 75px และกลายเป็น 275px ส่วนองค์ประกอบที่สอง - 25px มันจะกลายเป็น 125px

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

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

ดูเพิ่มเติม

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