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

คุณสมบัติ flex-shrink กำหนดว่า flex-block จะลดขนาดลงมากน้อยเพียงใดเทียบกับ องค์ประกอบข้างเคียงภายใน flex-container ในกรณีที่มีพื้นที่ว่างไม่เพียงพอ

ตัวอย่างเช่น หาก flex-block ทั้งหมดภายใน flex-container มี flex-shrink:1 พวกมันจะมี ขนาดเท่ากัน หากหนึ่งในนั้นมี flex-shrink:2 มันจะเล็กกว่า ที่เหลือทั้งหมด 2 เท่า

นำไปใช้กับ: flex block เฉพาะ

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

ไวยากรณ์

cssselector {
  flex-shrink: positive number;
}

ค่าดั้งเดิม: 1

ตัวอย่าง

สมมติว่ามีองค์ประกอบ 3 ช่อง แต่ละช่องมี ความกว้าง 200px และรวมกันได้ 600px ซึ่งมากกว่าความกว้างของคอนเทนเนอร์หลัก ซึ่ง เท่ากับ 350px:

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

Результат:

มาคำนวณพื้นที่ว่างเชิงลบ ตามสูตร:

ความกว้างโดยรวมถ่วงน้ำหนักขององค์ประกอบ โดยคำนึงถึงค่าของคุณสมบัติ flex-shrink สำหรับแต่ละองค์ประกอบจะเท่ากับ:

ทีนี้มากำหนดว่าองค์ประกอบแรกจะหดลง เท่าใด:

องค์ประกอบที่สอง:

องค์ประกอบที่สาม:

ปรากฏว่าองค์ประกอบที่สาม ซึ่งมีค่า flex-shrink เท่ากับ 3 จะหดลงมากกว่า องค์ประกอบอื่นๆ

ดูเพิ่มเติม