วิธีป้องกัน Flexbox Child Elements ยืดความสูงแนวตั้งใน CSS

สมมติมี flexbox container พร้อม button ด้านใน:

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

ลอง center align button (child) แนวนอนด้วย justify-content:

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

ความสูงของ button (child) จะยืดเต็ม parent height (300px):

น่าจะไม่ใช่ที่ต้องการ!

มีหลายวิธีป้องกัน flex items (children of flex container) ยืดแนวตั้ง

ถ้า center align flex items แนวตั้งด้วย align-items stretch จะหายไปอัตโนมัติ:

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

แต่ไม่อยาก vertically align flex items ล่ะ?

ใช้ CSS height property ค่า max-content บน flex item:

.button { height: max-content; }

ตอนนี้ flex item height ถูกกำหนดโดยเนื้อหา (ข้อความ 14px + default padding)

ใช้ align-self property บน flex item ได้อีก:

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

ผลลัพธ์เหมือน max-content ใน simple cases ขึ้นอยู่กับ context (ลองทั้งคู่)