สี & ดีไซน์

ลองเล่น Flexbox ปรับ justify align wrap ดูผลสดพร้อมโค้ด

สนามทดลอง Flexbox ที่ให้ปรับ flex-direction, justify-content, align-items, align-content และ gap แล้วเห็นผลทันทีกับชิ้นส่วนหลายขนาด เหมาะกับคนเรียนรู้หรือจำค่าไม่ได้ว่าคุณสมบัติไหนทำอะไร

วิธีใช้

  1. เลือกค่าของ container ด้านบน
  2. ตั้งจำนวนชิ้นและ flex-grow
  3. ดูผลในกรอบแล้วคัดลอกโค้ด CSS

คำถามที่พบบ่อย

justify-content กับ align-items ต่างกันอย่างไร?

justify-content จัดตามแกนหลักของ flex ส่วน align-items จัดตามแกนขวาง ถ้าเปลี่ยนเป็น column ทั้งสองจะสลับทิศ

align-content ไม่เห็นผลเพราะอะไร?

align-content ใช้เมื่อมีหลายบรรทัด ต้องเปิด flex-wrap และมีชิ้นมากพอจนขึ้นบรรทัดใหม่

เจอปัญหา? แจ้งเครื่องมือนี้