ตัวสร้าง CSS Flexbox

CSS Flexbox เป็นวิธีการจัดวางแบบหนึ่งมิติสำหรับจัดเรียงรายการในแถวหรือคอลัมน์

ปรับคุณสมบัติคอนเทนเนอร์และรายการ flex โดยใช้ตัวควบคุม ตัวอย่างจะอัปเดตแบบเรียลไทม์

ได้ ใช้ปุ่มเพื่อเปลี่ยนจำนวนรายการในตัวอย่าง

คลิกปุ่ม "คัดลอก CSS" เพื่อคัดลอกโค้ดไปยังคลิปบอร์ด

คอนเทนเนอร์ flex คือองค์ประกอบแม่ที่ใช้ display: flex รายการ flex คือลูกโดยตรงของคอนเทนเนอร์ คุณสมบัติคอนเทนเนอร์ควบคุมเลย์เอาต์โดยรวม ในขณะที่คุณสมบัติรายการควบคุมพฤติกรรมของแต่ละองค์ประกอบ

justify-content จัดแนวรายการ flex ตามแกนหลัก (แนวนอนเป็นค่าเริ่มต้น) ค่ารวมถึง flex-start, flex-end, center, space-between, space-around และ space-evenly

align-items จัดแนวรายการ flex ตามแกนขวาง (แนวตั้งเป็นค่าเริ่มต้น) ค่ารวมถึง flex-start, flex-end, center, stretch และ baseline

flex-wrap ควบคุมว่ารายการ flex จะ.wrap ไปยังหลายบรรทัดหรือไม่ ค่าคือ nowrap (ค่าเริ่มต้น), wrap และ wrap-reverse

flex-direction กำหนดทิศทางของแกนหลัก ค่าคือ row (ค่าเริ่มต้น), row-reverse, column และ column-reverse

ได้ Flexbox ดีเยี่ยมสำหรับเลย์เอาต์แบบตอบสนอง คุณสามารถรวมคุณสมบัติ flex กับ media queries เพื่อสร้างเลย์เอาต์ที่ปรับตัวเข้ากับขนาดหน้าจอต่างๆ

ใช่ ตัวสร้าง CSS Flexbox นี้ฟรีสมบูรณ์ ไม่มีค่าใช้จ่ายแฝง ไม่จำเป็นต้องลงทะเบียน และคุณสามารถใช้มันได้ไม่จำกัด

ใช่ ตัวสร้างตอบสนองอย่างสมบูรณ์และทำงานบนอุปกรณ์ทั้งหมดรวมถึงสมาร์ทโฟน แท็บเล็ต แล็ปท็อป และคอมพิวเตอร์เดสก์ท็อป

Flexbox รองรับโดยเบราว์เซอร์สมัยใหม่ทั้งหมดรวมถึง Chrome, Firefox, Safari, Edge และ Opera มีการรองรับเบราว์เซอร์ทั่วโลกมากกว่า 98%

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