ตัวสร้าง CSS Flexbox
ตัวสร้าง CSS Flexbox แบบภาพพร้อมตัวอย่างสด ปรับคุณสมบัติ flex และรับโค้ด CSS พร้อมใช้งาน
CSS Flexbox คืออะไร?
CSS Flexbox เป็นวิธีการจัดวางแบบหนึ่งมิติสำหรับจัดเรียงรายการในแถวหรือคอลัมน์
ใช้ตัวสร้างนี้อย่างไร?
ปรับคุณสมบัติคอนเทนเนอร์และรายการ flex โดยใช้ตัวควบคุม ตัวอย่างจะอัปเดตแบบเรียลไทม์
ฉันสามารถเพิ่มหรือลบรายการ flex ได้หรือไม่?
ได้ ใช้ปุ่มเพื่อเปลี่ยนจำนวนรายการในตัวอย่าง
ฉันคัดลอก CSS ที่สร้างขึ้นได้อย่างไร?
คลิกปุ่ม "คัดลอก CSS" เพื่อคัดลอกโค้ดไปยังคลิปบอร์ด
ความแตกต่างระหว่างคอนเทนเนอร์ flex และรายการ flex คืออะไร?
คอนเทนเนอร์ flex คือองค์ประกอบแม่ที่ใช้ display: flex รายการ flex คือลูกโดยตรงของคอนเทนเนอร์ คุณสมบัติคอนเทนเนอร์ควบคุมเลย์เอาต์โดยรวม ในขณะที่คุณสมบัติรายการควบคุมพฤติกรรมของแต่ละองค์ประกอบ
justify-content ทำอะไร?
justify-content จัดแนวรายการ flex ตามแกนหลัก (แนวนอนเป็นค่าเริ่มต้น) ค่ารวมถึง flex-start, flex-end, center, space-between, space-around และ space-evenly
align-items ทำอะไร?
align-items จัดแนวรายการ flex ตามแกนขวาง (แนวตั้งเป็นค่าเริ่มต้น) ค่ารวมถึง flex-start, flex-end, center, stretch และ baseline
flex-wrap คืออะไร?
flex-wrap ควบคุมว่ารายการ flex จะ.wrap ไปยังหลายบรรทัดหรือไม่ ค่าคือ nowrap (ค่าเริ่มต้น), wrap และ wrap-reverse
flex-direction คืออะไร?
flex-direction กำหนดทิศทางของแกนหลัก ค่าคือ row (ค่าเริ่มต้น), row-reverse, column และ column-reverse
ฉันสามารถใช้สิ่งนี้สำหรับเลย์เอาต์แบบตอบสนองได้หรือไม่?
ได้ Flexbox ดีเยี่ยมสำหรับเลย์เอาต์แบบตอบสนอง คุณสามารถรวมคุณสมบัติ flex กับ media queries เพื่อสร้างเลย์เอาต์ที่ปรับตัวเข้ากับขนาดหน้าจอต่างๆ
เครื่องมือนี้ฟรีหรือไม่?
ใช่ ตัวสร้าง CSS Flexbox นี้ฟรีสมบูรณ์ ไม่มีค่าใช้จ่ายแฝง ไม่จำเป็นต้องลงทะเบียน และคุณสามารถใช้มันได้ไม่จำกัด
มันทำงานบนอุปกรณ์มือถือหรือไม่?
ใช่ ตัวสร้างตอบสนองอย่างสมบูรณ์และทำงานบนอุปกรณ์ทั้งหมดรวมถึงสมาร์ทโฟน แท็บเล็ต แล็ปท็อป และคอมพิวเตอร์เดสก์ท็อป
เบราว์เซอร์ใดรองรับ Flexbox?
Flexbox รองรับโดยเบราว์เซอร์สมัยใหม่ทั้งหมดรวมถึง Chrome, Firefox, Safari, Edge และ Opera มีการรองรับเบราว์เซอร์ทั่วโลกมากกว่า 98%
ฉันสามารถบันทึกการกำหนดค่า flexbox ของฉันได้หรือไม่?
โค้ด CSS ที่สร้างขึ้นสามารถคัดลอกและบันทึกลงในไฟล์ของคุณเอง แม้ว่าเครื่องมือจะไม่มีคุณสมบัติบันทึกในตัว คุณสามารถบุ๊กมาร์กหน้าด้วยการตั้งค่าปัจจุบันของคุณ
วิธีใช้ ตัวสร้าง CSS Flexbox
ประกอบเลย์เอาต์ Flexbox แบบเห็นภาพ และได้ CSS ที่สะอาดทันที ทุกอย่างทำงานแบบโลคัลในเบราว์เซอร์ของคุณ ข้อมูลไม่ออกจากอุปกรณ์ของคุณ
- เลือก flex-direction เช่น row, row-reverse, column หรือ column-reverse
- ตั้ง justify-content เป็น flex-start, center, space-between, space-around หรือ space-evenly เพื่อจัดวางไอเทมตามแกนหลัก
- เลือก align-items — stretch, flex-start, flex-end, center หรือ baseline — เพื่อจัดแนวตามแกนขวาง
- กรอกระยะห่างใน gap (px) และปรับ flex-wrap คู่กับ align-content เมื่อไอเทมต้องขึ้นบรรทัดใหม่
- เปิด Show Item Numbers เพื่อแยกแยะไอเทมแต่ละตัว แล้วคัดลอก CSS ที่สร้างขึ้น
เมื่อเปิด flex-wrap แล้ว พื้นที่ว่างบนแกนขวางจะถูกควบคุมด้วย align-content ไม่ใช่ align-items จุดนี้คนสับสนกันบ่อย
เครื่องมือที่เกี่ยวข้อง
- ตัวสร้าง CSS Grid ตัวสร้าง CSS Grid แบบภาพฟรีพร้อมตัวอย่างสด ออกแบบเลย์เอาต์กริดแบบตอบสนองเชิงโต้ตอบและส่งออกโค้ด CSS พร้อมใช้งานทันที
- ตัวสร้าง CSS Gradient สร้าง CSS gradient ที่สวยงามแบบภาพ สร้าง gradient เชิงเส้น รัศมี และกรวยด้วยจุดหยุดสีหลายจุด มุมและตำแหน่งที่กำหนดเอง คัดลอกโค้ด CSS ที่พร้อมใช้งานทันที
- ตัวสร้าง CSS Box Shadow ตัวสร้าง CSS box-shadow ออนไลน์ฟรี สร้างเงาสวยงามแบบภาพด้วยออฟเซ็ต เบลอ กระจาย สี และ inset ที่ปรับได้ ตัวอย่างแบบเรียลไทม์และคัดลอกโค้ดทันที
- ตัวสร้าง Border Radius CSS ตัวสร้าง border-radius CSS แบบภาพ ปรับแต่ละมุมอย่างอิสระพร้อมดูตัวอย่างแบบเรียลไทม์และคัดลอกโค้ด CSS ทันที
- ตัวสร้าง Border Radius ตัวสร้างขอบมนสร้างสรรค์ออนไลน์ฟรี ลากจุดจับทั้งแปดหรือเลือกรูปทรงบล็อบสำเร็จรูป เพื่อสร้างรูปทรง CSS อินทรีย์และคัดลอกโค้ดได้ทันที
- ตัวแปลงสี ตัวแปลงสีออนไลน์ฟรี แปลงรูปแบบ HEX, RGB, HSL, HSV ทันทีด้วยตัวเลือกภาพ 100% ส่วนตัว ทำงานในเบราว์เซอร์ของคุณ
- ตัวสร้าง CSS Easing ตัวสร้าง easing CSS ออนไลน์ฟรี ลากจุดควบคุม cubic-bezier บนเส้นโค้งอินเทอร์แอกทีฟ เลือกจากพรีเซ็ต 18 แบบ ดูตัวอย่างลูกบอลวนซ้ำ แล้วคัดลอกฟังก์ชันจังหวะเวลาทันที
- ตัวสร้าง Text Shadow CSS ตัวสร้าง text-shadow CSS ออนไลน์ฟรี ซ้อนหลายเลเยอร์เงาพร้อมปรับออฟเซ็ต เบลอ สี และความทึบ ลองพรีเซ็ตนีออน 3D เรโทร แล้วคัดลอกโค้ด CSS ทันที