ไวยากรณ์
Selector { flex: /*value*/ }
ตัวอย่างที่ 1: ใช้ margin-top: auto เพื่อผลักองค์ประกอบสุดท้ายไปด้านล่าง
<!DOCTYPE html> <html> <head> <style> div { display: flex; flex-direction: column; box-shadow: inset 0 0 6px aqua; margin: 2%; width: 30%; height: 15%; } #d2, #d3 { margin-left: 15%; margin-top: 5%; box-shadow: inset 0 0 6px green!important; } #d4 { box-shadow: inset 0 0 6px red!important; margin-top: auto; } </style> </head> <body> <div id="container"> <div id="d1">Random text here..</div> <div id="d2">Hello!!</div> <div id="d3">Watch this</div> <div id="d4">Example</div> </div> </body> </html>
ตัวอย่างที่ 2: จัดตำแหน่งภาพไปด้านล่างกึ่งกลาง
<!DOCTYPE html> <html> <head> <style> div { display: flex; flex-direction: column; box-shadow: inset 0 0 6px red; margin: 2%; width: 30%; } #d2, #d3 { margin-left: 15%; border-radius: 50%; padding: 5%; box-shadow: inset 0 0 6px green!important; } #d4 { margin-left: 50%; margin-top: auto; } </style> </head> <body> <div id="container"> <div id="d1"><img src="https://images.pexels.com/photos/5512653/pexels-photo-5512653.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" /></div> <div id="d2"></div> <div id="d3"></div> <div id="d4"><img src="https://images.pexels.com/photos/6032874/pexels-photo-6032874.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" /></div> </div> </body> </html>
เทคนิคสำคัญคือการใช้ margin-top: auto บนองค์ประกอบที่ต้องการให้อยู่ด้านล่างสุดใน flex container แนวตั้ง ซึ่งจะดึงพื้นที่ว่างที่เหลือมาไว้ข้างบน ทำให้องค์ประกอบนั้นถูกผลักลงมาล่างสุด
