Monday, 2 December 2024

ขยาย-หด ความกว้างของ block ด้วย flex-shrink flex-grow flex-basis

09 May 2018
166
luminox watches

flex-shrink ให้ item หดตัว
flex-shrink :1 ; /จะหดเท่าๆกัน
flex-shrink :2 ; / จะหดเป็น 2 เท่า

flex-grow ให้ item ขยาย
flex-grow :2; /จะขยาย 2 เท่ามากกว่า box อื่นๆ
flex-grow :0; /จะไม่ขยายเหมือน box อื่นๆ

flex-basis กำหนดให้ยืดหยุ่น
flex-basis : 500px /จะกำหนดให้ยืดค่าเริ่มต้น ที่ 500 px ต่างจาก box อื่นๆ

flex:1 ให้มีขนาดเท่ากันเป๊ะๆ ไม่มีพื้นที่ว่าง

flex-grow-css

flex-grow-css

Thanat Sirikitphattana

แบ่งปันกัน เราอยู่กันไม่เกิน 100 ปีหรอกครับ
สุดท้ายก็ทิ้งไว้ที่โลก จะคงเหลือไว้แต่คุณงามความดีที่ให้ระลึกถึงกันครับ

Follow Us / Thanat Sirikitphattana