1. Flex-grow หมายถึงการขยายความกว้างที่ถูกครอบครองโดยรายการดิ้น พื้นที่ที่ขยายคือพื้นที่ว่างที่เหลืออยู่หลังจากแยกองค์ประกอบออกแล้ว
2. ไม่รองรับค่าลบ ค่าเริ่มต้นคือ 0 ซึ่งหมายความว่าพื้นที่สีขาวที่เหลือจะไม่ถูกครอบครองเพื่อขยายความกว้าง
หาก flex-grow มากกว่า 0 การจัดสรรพื้นที่ที่เหลืออยู่ในคอนเทนเนอร์ Flex จะเกิดขึ้น
ตัวอย่าง
// ส่วน HTML <div>
<div></div>
<div></div>
<div></div>
</div>
// CSS part.box{
ความกว้าง: 600px;
ความสูง: 200px;
เส้นขอบ: 1px ทึบ;
จอแสดงผล: ดิ้น;
-
.box div: ประเภทที่ n (1) {
ความกว้าง: 100px;
ความสูง: 100px;
สีพื้นหลัง: สีแดง;
-
.box div: ประเภทที่ n (2) {
ความกว้าง: 150px;
ความสูง: 100px;
สีพื้นหลัง: ฟ้า;
-
.box div: ประเภทที่ n (3) {
ความกว้าง: 200px;
ความสูง: 100px;
สีพื้นหลัง: สีเหลือง;
-ข้างต้นนี้เป็นการแนะนำคุณลักษณะ flex-grow ใน CSS ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน