การควบคุมการหดตัวของบล็อก flex ใน CSS

โดยค่าเริ่มต้น ชิ้นส่วนจะถูกหักออกจากทุกองค์ประกอบ ตามสัดส่วนความกว้างขององค์ประกอบ อย่างไรก็ตาม เป็นไปได้ที่จะทำให้บางองค์ประกอบ ถูกหักออกมากหรือน้อยกว่าปกติ สำหรับสิ่งนี้มีคุณสมบัติพิเศษ flex-shrink

คุณสมบัตินี้แสดงน้ำหนักบางส่วน ซึ่งจะถูกนำไปคูณกับความกว้างขององค์ประกอบ เมื่อคำนวณชิ้นส่วนที่ถูกหักออกตามสูตร ที่กล่าวไว้ข้างต้น ตัวอย่างเช่น หาก ความกว้างขององค์ประกอบเท่ากับ 200px และ flex-shrink ของมันเท่ากับ 3 ดังนั้น น้ำหนัก (คือคูณด้วยน้ำหนัก) ความกว้างขององค์ประกอบ จะได้เท่ากับ:

200px * 3 = 600px

สูตรเมื่อคำนึงถึง flex-shrink จะ มีรูปแบบดังนี้: พื้นที่ว่างที่เป็นลบ * (ความกว้างที่มีน้ำหนักขององค์ประกอบ / ผลรวมของ ความกว้างที่มีน้ำหนักทั้งหมดขององค์ประกอบ)

ลองดูตัวอย่าง สมมติว่าเรา มี 4 องค์ประกอบ ให้ความกว้างขององค์ประกอบแรก เท่ากับ 400px และ flex-shrink เท่ากับ 2 ความกว้างขององค์ประกอบที่เหลือ - 200px และ flex-shrink ของพวกมันเท่ากับ 1 ให้ความกว้างของพ่อแม่ 900px

ความกว้างรวมขององค์ประกอบเท่ากับ:

400px + 3 * 200px = 1000px

พื้นที่ว่างที่เป็นลบจะเท่ากับ:

1000px - 900px = 100px

ความกว้างรวมที่มีน้ำหนักขององค์ประกอบเท่ากับ:

400px * 2 + 200px * 1 + 200px * 1 + 200px * 1 = 1400px

ความกว้างที่มีน้ำหนักขององค์ประกอบแรกเท่ากับ:

400px * 2 = 800px

ชิ้นส่วนต่อไปนี้จะถูกหักออกจากองค์ประกอบแรก:

100px * (800px / 1400px) = 100px * 0.57 = 57.14px

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

400px - 57.14px = 342.86px ~ 343px

ความกว้างที่มีน้ำหนักขององค์ประกอบอื่นๆ แต่ละองค์ประกอบ เท่ากับ:

200px * 1 = 200px

ชิ้นส่วนต่อไปนี้จะถูกหักออกจากแต่ละองค์ประกอบ:

100px * (200px / 1400px) = 100px * 0.142 = 14.2px

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

200px - 14.2px = 185.8px ~ 186px

Задание 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: 200px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 100px;
  flex-shrink: 2;
}
.elem2 {
  width: 100px;
  flex-shrink: 1;
}
.elem3 {
  width: 100px;
  flex-shrink: 1;
}

Задание 3

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

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

Задание 4

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

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