สร้างเลย์เอาต์ Flexbox ที่สมบูรณ์แบบ

แสดงภาพ ปรับแต่ง และสร้างโค้ดเฟล็กซ์บ็อกซ์ CSS ด้วยอินเทอร์เฟซแบบลากและวางที่ใช้งานง่ายของเรา

คุณสมบัติของคอนเทนเนอร์

คุณสมบัติของรายการ

3 items

Preview

Item 1
Item 2
Item 3
.flex-container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; }  .flex-item { /* Default item styles */ flex: 0 1 auto; order: 0; align-self: auto; }
โค้ด CSS ที่สร้างขึ้น

Flexbox ที่ตั้งไว้ล่วงหน้ายอดนิยม

กึ่งกลางในแนวนอนและแนวตั้ง

Content

เหมาะสําหรับการจัดกึ่งกลางโลโก้ ปุ่ม หรือองค์ประกอบใดๆ ทั้งในแนวนอนและแนวตั้ง

ระยะห่างเท่ากัน

Item 1
Item 2
Item 3

สร้างระยะห่างที่เท่ากันระหว่างองค์ประกอบด้วยช่องว่างระหว่างหรือเว้นวรรครอบ

เมนูแนวตั้ง

Home
About
Contact

สร้างเมนูการนําทางแนวตั้งที่มีระยะห่างและการจัดตําแหน่งที่สอดคล้องกัน

กริดที่ตอบสนอง

Box 1
Box 2
Box 3
Box 4
Box 5

สร้างเค้าโครงกริดที่ตอบสนองซึ่งตัดรายการตามพื้นที่ว่าง

แบนเนอร์ฮีโร่

ชื่อเรื่องหลัก

ส่วนฮีโร่พร้อมคํากระตุ้นการตัดสินใจ

ออกแบบแบนเนอร์ฮีโร่พร้อมชื่อ คําบรรยาย และปุ่มคํากระตุ้นการตัดสินใจ

เค้าโครงส่วนกระดาษ

Company

About Us

Careers

Support

ศูนย์ช่วยเหลือ

ติดต่อเรา

© เครื่องกําเนิดไฟฟ้า Flexbox ปี 2023

สร้างส่วนท้ายที่ตอบสนองด้วยคอลัมน์ที่ซ้อนกันบนหน้าจอขนาดเล็ก

ตัวอย่างในโลกแห่งความเป็นจริง

แถบนําทาง

Logo
Home
Products
About
Contact

เค้าโครงแถบนําทางทั่วไปที่มีโลโก้ทางด้านซ้าย รายการเมนูอยู่ตรงกลาง และไอคอนรถเข็นทางด้านขวา

Card Grid

ชื่อการ์ด

ข้อความคําอธิบายการ์ดที่นี่

ชื่อการ์ด

ข้อความคําอธิบายการ์ดที่นี่

ชื่อการ์ด

ข้อความคําอธิบายการ์ดที่นี่

กริดการ์ดที่ตอบสนองซึ่งปรับให้เข้ากับขนาดหน้าจอต่างๆ โดยใช้คุณสมบัติ flexbox

เค้าโครงบทความ

ชื่อบทความ

โพสต์เมื่อ มกราคม 1, 2023 · ฟาร์ฮาน อ่าน 5 นาที

เนื้อหาบทความที่นี่ นี่อาจเป็นบทสรุปสั้น ๆ หรือข้อความบทความฉบับเต็ม เฟล็กซ์บ็อกซ์ช่วยจัดแนวรูปภาพและข้อความในลักษณะที่ดึงดูดสายตา

เค้าโครงบทความทั่วไปที่มีรูปภาพทางด้านซ้ายและเนื้อหาข้อความทางด้านขวาวางซ้อนกันบนอุปกรณ์มือถือ

เค้าโครงแดชบอร์ด

Header
Sidebar
เนื้อหาหลัก
Footer

เค้าโครงแดชบอร์ดที่มีส่วนหัวแถบด้านข้างพื้นที่เนื้อหาหลักและส่วนท้ายโดยใช้เฟล็กซ์บ็อกซ์สําหรับการจัดตําแหน่งทั้งแนวนอนและแนวตั้ง

พื้นฐาน Flexbox

Flexbox คืออะไร?

Flexible Box Layout หรือที่รู้จักกันทั่วไปในชื่อ Flexbox เป็นโมเดลเค้าโครง CSS3 ที่ให้วิธีที่มีประสิทธิภาพในการกระจายและจัดตําแหน่งพื้นที่ระหว่างรายการในคอนเทนเนอร์ แม้ว่าจะไม่ทราบขนาดหรือไดนามิกก็ตาม

The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes).

แนวคิดหลัก:Flexbox แนะนําแนวคิดหลักสองประการ:คอนเทนเนอร์แบบยืดหยุ่น and the รายการแบบยืดหยุ่น. คอนเทนเนอร์เป็นองค์ประกอบหลัก และรายการเป็นลูกโดยตรง

แกนหลัก vs แกนไขว้

เค้าโครงเฟล็กซ์บ็อกซ์ขึ้นอยู่กับสองแกน:main axis and the แกนข้าม.

  • แกนหลัก:แกนหลักที่วางรายการยืดหยุ่น กําหนดโดยflex-direction.
  • แกนข้าม:แกนตั้งฉากกับแกนหลัก ทิศทางของมันขึ้นอยู่กับทิศทางแกนหลัก
แกนหลัก →
← แกนข้าม
Start
Main
End

คุณสมบัติของคอนเทนเนอร์

Property Description
display กําหนดคอนเทนเนอร์แบบยืดหยุ่น inline หรือ block ขึ้นอยู่กับค่าที่กําหนด
flex-direction สร้างแกนหลัก ดังนั้นจึงกําหนดทิศทางที่ไอเท็ม Flex ถูกวางไว้ในคอนเทนเนอร์ Flex
flex-wrap ตามค่าเริ่มต้น รายการ Flex ทั้งหมดจะพยายามพอดีกับบรรทัดเดียว คุณสามารถเปลี่ยนแปลงและอนุญาตให้รายการตัดได้ตามต้องการด้วยคุณสมบัตินี้
justify-content จัดแนวรายการแบบยืดหยุ่นตามแกนหลักของบรรทัดปัจจุบันของคอนเทนเนอร์แบบยืดหยุ่น
align-items จัดแนวรายการแบบยืดหยุ่นตามแกนกากบาทของบรรทัดปัจจุบันของคอนเทนเนอร์แบบยืดหยุ่น
align-content จัดแนวเส้นของคอนเทนเนอร์แบบยืดหยุ่นภายในเมื่อมีพื้นที่ว่างเพิ่มเติมในแกนไขว้

คุณสมบัติของรายการ

Property Description
order ตามค่าเริ่มต้น สินค้ายืดหยุ่นเวลาจะถูกจัดวางในลําดับต้นทาง อย่างไรก็ตามorderคุณสมบัติควบคุมลําดับที่ปรากฏในคอนเทนเนอร์แบบยืดหยุ่น
flex-grow กําหนดความสามารถสําหรับไอเท็มแบบยืดหยุ่นเวลาที่จะเติบโตหากจําเป็น ยอมรับค่าที่ไม่มีหน่วยซึ่งทําหน้าที่เป็นสัดส่วน
flex-shrink กําหนดความสามารถสําหรับสินค้าแบบยืดหยุ่นในการย่อขนาดหากจําเป็น
flex-basis กําหนดขนาดเริ่มต้นของรายการยืดหยุ่นเวลาก่อนที่จะกระจายพื้นที่ว่างตามปัจจัยการยืดหยุ่นเวลา
align-self อนุญาตให้จัดตําแหน่งเริ่มต้น (หรือที่ระบุโดยalign-items) เพื่อแทนที่สําหรับรายการยืดหยุ่นแต่ละรายการ

Related Tools

ตัวย่อขนาด CSS

บีบอัดและเพิ่มประสิทธิภาพโค้ด CSS ของคุณด้วยความแม่นยําระดับมืออาชีพ

Less to CSS Converter

แปลงโค้ด Less ของคุณเป็น CSS รวดเร็ว ง่ายดาย และปลอดภัย

ตัวสร้างการเปลี่ยน CSS3

การเปลี่ยนความทึบที่ราบรื่น

เครื่องคํานวณความน่าจะเป็น

คํานวณความน่าจะเป็นสําหรับสถานการณ์ต่างๆ ด้วยเครื่องคํานวณความน่าจะเป็นที่ครอบคลุมของเรา

ตัวแปลง CSS เป็น LESS

แปลงโค้ด CSS ของคุณให้เป็น LESS ด้วยตัวแปร การซ้อน และอื่นๆ รวดเร็ว ง่ายดาย และปลอดภัย

SHA-512/224 เครื่องคํานวณแฮช

สร้างแฮช SHA-512/224 อย่างรวดเร็วและง่ายดาย