สร้างเลย์เอาต์ 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 รวดเร็ว ง่ายดาย และปลอดภัย

เครื่องสร้างปุ่ม CSS ฟรี

Erstellen Sie ansprechende, responsive Schaltflächen für Ihre Website. Wählen Sie aus über 70 vorgefertigten Stilen oder passen Sie Ihre eigenen mit unseren erweiterten Steuerelementen an.

ข้อความเป็น ASCII

แปลงข้อความเป็นรหัส ASCII ได้อย่างง่ายดาย

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

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