วิธีป้องกันความสูงขององค์ประกอบลูก Flexbox จากการยืดในแนวตั้งใน CSS

สมมติว่าคุณมี flexbox คอนเทนเนอร์ที่มีปุ่มอยู่ข้างใน:

<div class="container">
  <button class="button">Button</button>
</div>

หากคุณพยายามจัดตำแหน่งปุ่ม (องค์ประกอบลูก) ให้อยู่ตรงกลางในแนวนอนด้วย justify-content คุณสมบัติเช่นนี้:

.container {
  height: 300px;
  display: flex;
  justify-content: center;
}

จากนั้นความสูงของปุ่ม (องค์ประกอบย่อย) จะขยายไปจนถึงความสูงขององค์ประกอบหลัก (ในกรณีนี้ 300px ):

ซึ่งคงไม่ใช่สิ่งที่คุณต้องการ!

มีสองวิธีในการป้องกัน รายการแบบยืดหยุ่น (ลูกของภาชนะดิ้น) จากการยืดในแนวตั้ง

หากคุณจัดตำแหน่งรายการ flex ในแนวตั้งด้วย align-items คุณสมบัติ การยืดจะหายไปโดยอัตโนมัติ:

.container {
  height: 300px;
  display: flex;
  justify-content: center;

  /*Vertical center alignment:*/
  align-items: center;
}

แต่ถ้าคุณไม่ต้องการจัดแนวสินค้าแบบยืดหยุ่นของคอนเทนเนอร์แบบยืดหยุ่นในแนวตั้ง

จากนั้นคุณสามารถใช้ CSS height max-contentของคุณสมบัติ ค่าของรายการดิ้น:

.button {
  height: max-content;
}

ตอนนี้ ความสูงของรายการแบบยืดหยุ่นของคุณจะถูกกำหนดโดยความสูงของเนื้อหา ซึ่งในตัวอย่างปุ่มนี้คือข้อความ ซึ่งเท่ากับ 14px (+ ช่องว่างภายในเริ่มต้นของปุ่ม):

คุณยังสามารถใช้ align-self คุณสมบัติบนรายการดิ้น:

.button {
  align-self: flex-start;
}

ซึ่งจะให้ผลลัพธ์เหมือนกับการใช้ max-content ในกรณีการใช้งานง่ายๆ แต่ขึ้นอยู่กับบริบทเฉพาะของคุณ (ลองทั้งสองอย่าง)