CSS3 มีโหมด Layout ชื่อ Flexible Box หรือที่เรียกกันว่า Flexbox Flexbox เป็นโหมด Layout ของ CSS3 ที่ช่วยสร้าง Layout สำหรับแอปพลิเคชันและหน้าเว็บที่ซับซ้อนได้ง่าย ประกอบด้วย Container, Flex Items ฯลฯ Container มีคุณสมบัติดังนี้ −
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
นี่คือโค้ดสำหรับ Advance CSS Layout ด้วย Flexbox −
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .container { display: flex; flex-wrap: wrap; justify-content: space-evenly; background-color: lightblue; } .container1 { align-self: flex-start; display: flex; background-color: rgb(71, 30, 255); width: 200px; margin: 20px; } .container1 > div { background-color: #f1f1f1; margin: 10px; padding: 10px; font-size: 30px; } .container2 { display: flex; background-color: rgb(14, 126, 79); width: 200px; justify-content: center; align-self: flex-start; margin: 20px; } .container2 > div { background-color: #f1f1f1; margin: 10px; padding: 10px; font-size: 30px; } .container3 { display: flex; flex-direction: column; background-color: rgb(168, 60, 10); width: 200px; align-items: center; margin: 20px; } .container3 > div { background-color: #f1f1f1; margin: 10px; padding: 10px; width: 20px; font-size: 30px; } </style> </head> <body> <h1>Flex layout example</h1> <div class="container"> <div class="container1"> <div>1</div> <div>2</div> <div>3</div> </div> <div class="container2"> <div>1</div> <div>2</div> <div>3</div> </div> <div class="container3"> <div>1</div> <div>2</div> <div>3</div> </div> <div class="container1"> <div>1</div> <div>2</div> <div>3</div> </div> </div> </body> </html>
ผลลัพธ์
โค้ดด้านบนจะแสดงผลดังนี้ −
