ความกว้างขององค์ประกอบที่แตกต่างกันและความสามารถในการย่อขนาดของบล็อก Flex ใน CSS

ตอนนี้อนุญาตให้องค์ประกอบของเรามีความกว้างต่างกัน ในกรณีนี้ ส่วนที่ถูกหักออกจะเป็นสัดส่วนกับ ความกว้างขององค์ประกอบนั้น และจะคำนวณ ตามสูตรต่อไปนี้: พื้นที่ว่างเชิงลบ * (ความกว้างขององค์ประกอบ / ผลรวมของความกว้างทั้งหมดขององค์ประกอบ)

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

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

ดังนั้นพื้นที่ว่างเชิงลบ จะเท่ากับ:

มาหาว่าจะถูกหักจากองค์ประกอบแรกเท่าไร:

นั่นคือความกว้างของมันจะเท่ากับ:

มาหาว่าจะถูกหักจากแต่ละองค์ประกอบที่เหลือเท่าไร:

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

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