สร้างเลย์เอาต์ 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 ของคุณด้วยความแม่นยําระดับมืออาชีพ

สร้างการแปลง CSS3 ได้อย่างง่ายดาย

เครื่องมือที่ทรงพลังและใช้งานง่ายสําหรับการสร้างการแปลง CSS3 ที่ซับซ้อนโดยไม่ต้องเขียนโค้ด แสดงภาพการเปลี่ยนแปลงแบบเรียลไทม์และคัดลอก CSS ที่สร้างขึ้นเพื่อใช้ในโครงการของคุณ

Less to CSS Converter

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

เครื่องมือเข้ารหัส URL

เข้ารหัสพารามิเตอร์ URL อย่างง่ายดายในเบราว์เซอร์ของคุณ

JavaScript Obfuscator

ปกป้องโค้ด JavaScript ของคุณจากการเข้าถึงโดยไม่ได้รับอนุญาตและวิศวกรรมย้อนกลับด้วยเครื่องมือสร้างความสับสนอันทรงพลังของเรา แปลงโค้ดของคุณให้เป็นรูปแบบที่อ่านไม่ได้ในขณะที่ยังคงฟังก์ชันการทํางานเต็มรูปแบบ

ฐานสิบหกเป็นทศนิยม

แปลงเลขฐานสิบหกเป็นทศนิยมอย่างง่ายดาย