ความโลภเป็นศูนย์ขององค์ประกอบ 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 กำหนดให้ จากโค้ดที่ให้ จงคำนวณหาขนาดของแต่ละองค์ประกอบ จากนั้นรันโค้ด และตรวจสอบการคำนวณของคุณ โดยวัดความกว้างจริง ขององค์ประกอบ

Задание 1

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

css.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;
}

Задание 2

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

css.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;
}

Задание 3

html<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>

css.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;
}