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

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

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

display

flex-direction

flex-wrap

justify-content

align-items

align-content

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

Items

3 items

รายการที่เลือก

flex-grow

flex-shrink

flex-basis

order

align-self

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; }

;
  ;Item 1;
  ;Item 2;
  ;Item 3;
;

;
  ;Item 1;
  ;Item 2;
  ;Item 3;
;

โค้ด 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

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

ติดต่อเรา

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

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

แถบนําทาง

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

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

ตัวแปลงสไตลัสเป็น CSS

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

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

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

ตัวแปลงหน่วยอุณหภูมิ

แปลงระหว่างหน่วยอุณหภูมิต่างๆ ด้วยความแม่นยําสําหรับความต้องการทางวิทยาศาสตร์และในชีวิตประจําวันของคุณ

แปลงมุมด้วยความแม่นยํา

แปลงระหว่างหน่วยมุมต่างๆ ได้อย่างง่ายดายด้วยเครื่องมือแปลงที่ใช้งานง่ายของเรา เหมาะสําหรับวิศวกร นักเรียน และมืออาชีพ

CMYK เป็น HSV

แปลงค่าสี CMYK เป็นแบบจําลองสี HSV สําหรับการใช้งานดิจิทัล