เรียนรู้วิธีป้องกันไม่ให้ Flexbox ของ CSS ยืดรูปภาพของคุณในแนวนอน
Flexbox มีพฤติกรรมเริ่มต้นที่ผิดปกติซึ่งรูปภาพถูกขยายในแนวนอนจนเต็มความกว้างของคอนเทนเนอร์หลัก ดังนั้น หากคุณมีองค์ประกอบหลัก (คอนเทนเนอร์แบบยืดหยุ่น) ที่มี flex-direction: column และองค์ประกอบลูก (flex item) ซึ่งเป็นรูปภาพ แล้ว ความสูงตามธรรมชาติของรูปภาพ ถูกคงไว้ในขณะที่ความกว้างถูกขยายให้กว้างเท่ากับคอนเทนเนอร์หลัก
ลักษณะการทำงานนี้ไม่สอดคล้องกัน ขึ้นอยู่กับสไตล์ชีต CSS เริ่มต้นของเบราว์เซอร์ของคุณ (สไตล์ชีตตัวแทนผู้ใช้)
โชคดีที่วิธีแก้ปัญหานั้นง่าย คุณเพียงแค่ต้องแทนที่ align-self . ของรายการ/flex ของคุณ stretchเริ่มต้นของคุณสมบัติ มีค่าอีกค่าหนึ่ง
แทนที่จะ stretch คุณสามารถใช้ center ซึ่งจะลบการยืดรูปภาพออก และจัดแนวรูปภาพของคุณในแนวตั้งตรงกลางคอนเทนเนอร์หลัก
img {
align-self: center;
}ตัวอย่าง
ดูตัวอย่าง CSS ต่อไปนี้โดยที่เรามีองค์ประกอบหลัก 1 รายการ (คอนเทนเนอร์แบบยืดหยุ่น) และองค์ประกอบรูปภาพย่อย 2 รายการ (รายการแบบยืดหยุ่น) ภายใน
- องค์ประกอบภาพแรกมีค่าเริ่มต้นของเบราว์เซอร์
align-self: stretchซึ่งทำให้อัตราส่วนภาพเสียหาย - ในองค์ประกอบรูปภาพที่สอง ฉันได้เพิ่มคลาสยูทิลิตี้ชื่อ
.self-centerด้วยalign-self: centerประกาศที่เอาการยืด:
https://codepen.io/StrengthandFreedom/pen/qBBoMOX
รุ่งโรจน์ แก้ปัญหา!
หมายเหตุ:คุณสามารถใช้ top . ได้ เพื่อจัดแนวรูปภาพของคุณในแนวตั้งที่ด้านบนของคอนเทนเนอร์หลัก
img {
align-self: top;
}
ทั้งสองวิธีจะลบค่าการยืดออกจากรูปภาพของคุณ แต่คุณควรใช้ top หรือ center ขึ้นอยู่กับว่าคุณต้องการทำอะไรกับรูปภาพของคุณ
นานาน่ารู้
รายการแบบยืดหยุ่นมี align-self . เป็นค่าเริ่มต้น ค่าของ stretch . ดังนั้น ไม่ว่า flex-item (องค์ประกอบย่อย) ของคุณจะเป็นรูปภาพหรือองค์ประกอบ HTML อื่น จะถูกขยายในแนวนอนโดยค่าเริ่มต้น
