flex-wrap ทำหน้าที่อะไร?

flex-wrap ควบคุมว่ารายการ flex จะคงอยู่ในบรรทัดเดียวหรือตัดขึ้นบรรทัดใหม่เมื่อมีพื้นที่ไม่เพียงพอ ค่าเริ่มต้น nowrap จะบังคับให้รายการอยู่ในบรรทัดเดียวและอาจทำให้รายการหดตัวลง wrap จะอนุญาตให้รายการไหลขึ้นบรรทัดใหม่ ส่วน wrap-reverse จะตัดขึ้นบรรทัดใหม่ในลำดับย้อนกลับ

พื้นที่ทดลอง CSS Flexbox

Q: justify-content และ align-items ต่างกันอย่างไร?

justify-content ควบคุมการจัดตำแหน่งตามแกนหลัก (แนวนอนโดยค่าเริ่มต้น) ในขณะที่ align-items ควบคุมการจัดตำแหน่งตามแกนรอง (แนวตั้งโดยค่าเริ่มต้น) เมื่อคุณเปลี่ยน flex-direction เป็น column แกนจะสลับกัน: justify-content จะกลายเป็นแนวตั้งและ align-items จะกลายเป็นแนวนอน

Q: จะจัดองค์ประกอบให้อยู่กึ่งกลางด้วย Flexbox ได้อย่างไร?

ในการจัดองค์ประกอบเดียวให้卧ู่กึ่งกลางทั้งแนวนอนและแนวตั้งด้วย Flexbox ให้ตั้งค่าคอนเทนเนอร์หลักเป็น display: flex จากนั้นเพิ่ม justify-content: center และ align-items: center นี่คือการแทนที่สมัยใหม่สำหรับวิธีแก้ขัดแบบเก่าที่ใช้ margin: auto, transform หรือ absolute positioning

Q: flex-grow, flex-shrink และ flex-basis ต่างกันอย่างไร?

flex-basis กำหนดขนาดเริ่มต้นของรายการก่อนที่จะมีการกระจายพื้นที่ว่าง flex-grow กำหนดว่ารายการควรดูดซับพื้นที่ว่างส่วนเกินมากน้อยเพียงใดเมื่อเทียบกับรายการอื่น (0 หมายถึงไม่ขยาย) flex-shrink กำหนดว่ารายการควรหดตัวลงมากน้อยเพียงใดเมื่อมีพื้นที่ไม่เพียงพอ (0 หมายถึงไม่หดตัว) ตัวย่อ flex: 1 1 auto จะตั้งค่าทั้งสามอย่างพร้อมกัน

Q: เมื่อไหร่ควรใช้ Flexbox เทียบกับ Grid?

ใช้ Flexbox สำหรับเลย์เอาต์มิติเดียวที่รายการไหลไปในทิศทางเดียว (แถวของปุ่ม, แถบนำทาง, รายการการ์ดในบรรทัดเดียว) ใช้ CSS Grid สำหรับเลย์เอาต์สองมิติที่คุณต้องการควบคุมทั้งแถวและคอลัมน์พร้อมกัน (เลย์เอาต์หน้าเต็ม, แกลเลอรีรูปภาพ, แดชบอร์ด) ทั้งสองอย่างทำงานเสริมกัน ไม่ได้แข่งขันกัน — การออกแบบจริงหลายอย่างใช้ทั้งสองอย่างร่วมกัน

พื้นที่ทดลอง CSS Flexbox แบบโต้ตอบพร้อมการแสดงตัวอย่างภาพสด การควบคุมแบบแยกส่วนรายชิ้น ค่าพรีเซ็ตเลย์เอาต์ที่ใช้จริง (Holy Grail, Card Grid, Navbar, Modal) และการส่งออก CSS ในคลิกเดียว เรียนรู้ flex-direction, justify-content, align-items, gap และอื่นๆ โดยการทดลองแบบเรียลไทม์

พื้นที่ทดลอง CSS Flexbox

⚡ เลย์เอาต์เริ่มต้นด่วน (คลิกเพื่อโหลด)

▦ ตัวอย่างสด

→ แกนหลัก ↓ แกนรอง 0 รายการ ทิป: คลิกรายการใดก็ได้เพื่อแก้ไข

⚙ คอนเทนเนอร์ (.flex-container)

flex-direction ?

flex-wrap ?

justify-content ?

align-items ?

align-content ?

gap 8px

8px

✦ รายการที่เลือก (.flex-item)

คลิกรายการในตัวอย่างเพื่อแก้ไขคุณสมบัติ

📖 คัมภีร์ด่วน — รูปแบบที่ใช้บ่อย

▼

ฉันต้องการ...	ใช้สิ่งนี้
จัดรายการหนึ่งให้อยู่กึ่งกลางเป๊ะ	`justify-content: center; align-items: center`
คอลัมน์กว้างเท่ากัน	`flex: 1` ในแต่ละรายการ
ดันรายการหนึ่งไปทางขวาสุด	`margin-left: auto` ที่รายการนั้น
ตัดขึ้นบรรทัดใหม่บนหน้าจอเล็ก	`flex-wrap: wrap` + `flex: 1 1 240px`
ย้อนลำดับบนมือถือ	`flex-direction: row-reverse` ใน media query
Footer ติดด้านล่างหน้าจอ	body: `display: flex; flex-direction: column; min-height: 100vh`
เว้นช่องว่างระหว่างรายการเท่าๆ กัน	`justify-content: space-between`
ไม่ให้รายการหดตัว	`flex-shrink: 0` ที่รายการนั้น

CSS ที่สร้างขึ้น

HTML ที่สร้างขึ้น

Embed พื้นที่ทดลอง CSS Flexbox Widget

เกี่ยวกับ พื้นที่ทดลอง CSS Flexbox

พื้นที่ทดลอง CSS Flexbox เป็นสภาพแวดล้อมการเรียนรู้แบบโต้ตอบและเครื่องมือสร้างโค้ดสำหรับโมดูล CSS Flexible Box Layout ที่ทันสมัย ปรับคุณสมบัติคอนเทนเนอร์ (flex-direction, justify-content, align-items, gap) และคุณสมบัติรายรายการ (flex-grow, flex-shrink, flex-basis, align-self, order) และรับชมเลย์เอาต์ของคุณอัปเดตแบบเรียลไทม์ เมื่อคุณได้สิ่งที่ต้องการแล้ว เพียงคัดลอก CSS และ HTML ที่พร้อมใช้งานไปวางในโปรเจกต์ของคุณได้เลย

CSS Flexbox คืออะไร?

CSS Flexbox (Flexible Box Layout) คือโมเดลเลย์เอาต์แบบมิติเดียวที่ออกแบบมาเพื่อกระจายพื้นที่ตามแกนเดียว (แถวหรือคอลัมน์) และจัดตำแหน่งรายการภายในคอนเทนเนอร์ มาแทนที่เทคนิคเก่าๆ เช่น floats และ inline-block hacks สำหรับแถบนำทาง, แถวการ์ด, เนื้อหาที่จัดกึ่งกลาง และ UI ใดๆ ที่องค์ประกอบจำเป็นต้องยืดหยุ่นตามคอนเทนเนอร์อย่างเป็นธรรมชาติ ต่างจาก CSS Grid ซึ่งเป็นแบบสองมิติ Flexbox จะโดดเด่นในการจัดวางที่เรียบง่ายกว่าซึ่งคุณสามารถควบคุมการจัดตำแหน่งได้เพียงทิศทางเดียวในแต่ละครั้ง

วิธีใช้งานพื้นที่ทดลองนี้

เลือกพรีเซ็ต (ไม่บังคับ): เลือก Holy Grail, Card Grid, Navbar, Hero, Modal หรือ Sticky Footer เพื่อโหลดจุดเริ่มต้นที่ใช้งานจริง แต่ละพรีเซ็ตคือเลย์เอาต์ที่ทำงานสมบูรณ์ซึ่งคุณสามารถศึกษาหรือปรับแต่งได้
ปรับแต่งคุณสมบัติคอนเทนเนอร์: ใช้การควบคุมแบบแยกส่วนในแผงด้านขวาเพื่อตั้งค่า flex-direction, flex-wrap, justify-content, align-items, align-content และ gap พื้นที่จำลองภาพจะอัปเดตทันที
แก้ไขรายการแต่ละรายการ: คลิกรายการใดก็ได้ในตัวอย่างเพื่อเลือก ปรับแต่ง order, flex-grow, flex-shrink, flex-basis และ align-self แยกจากรายการอื่น รายการที่มีการปรับแต่งจะถูกทำเครื่องหมายด้วยป้ายขนาดเล็ก
เพิ่มหรือลบรายการ: ใช้ปุ่มเพิ่มรายการและลบรายการที่เลือกเพื่อเปลี่ยนจำนวนรายการและดูว่าเลย์เอาต์ตอบสนองอย่างไร
คัดลอกโค้ด: ส่วนโค้ดที่สร้างขึ้นที่ด้านล่างจะสะท้อนถึงเลย์เอาต์ปัจจุบันของคุณเสมอ คัดลอก CSS, HTML หรือทั้งสองอย่างได้ด้วยคลิกเดียว

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

flex container คือองค์ประกอบหลักที่มี display: flex คุณสมบัติเหล่านี้จะควบคุมพฤติกรรมขององค์ประกอบย่อยทั้งหมดร่วมกัน

คุณสมบัติ	ค่า	ผลลัพธ์
`flex-direction`	`row` · `row-reverse` · `column` · `column-reverse`	กำหนดทิศทางแกนหลัก `row` จัดรายการจากซ้ายไปขวา (ค่าเริ่มต้น); `column` วางซ้อนกันในแนวตั้ง
`flex-wrap`	`nowrap` · `wrap` · `wrap-reverse`	ควบคุมว่ารายการจะคงอยู่ในบรรทัดเดียวหรือตัดขึ้นบรรทัดใหม่เมื่อพื้นที่หมด
`justify-content`	`flex-start` · `center` · `flex-end` · `space-between` · `space-around` · `space-evenly`	จัดตำแหน่งรายการตามแกนหลัก กระจายพื้นที่ว่างไปด้านข้างหรือระหว่างรายการ
`align-items`	`stretch` · `flex-start` · `center` · `flex-end` · `baseline`	จัดตำแหน่งรายการตามแกนรอง (ตั้งฉากกับแกนหลัก)
`align-content`	`stretch` · `flex-start` · `center` · `flex-end` · `space-between` · `space-around`	จัดตำแหน่งบรรทัดที่ตัดขึ้นมาตามแกนรอง จะมีผลเมื่อรายการมีการตัดขึ้นบรรทัดใหม่หลายบรรทัดเท่านั้น
`gap`	ความยาว เช่น `8px`, `1rem`	กำหนดระยะห่างระหว่างรายการ flex มาแทนที่การใช้ `margin` แบบเดิม

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

คุณสมบัติเหล่านี้จะใช้กับรายการ flex แต่ละรายการ (ลูกของ flex container) และจะเขียนทับค่าเริ่มต้นของคอนเทนเนอร์สำหรับรายการนั้นๆ

คุณสมบัติ	ค่า	ผลลัพธ์
`order`	ตัวเลขเต็ม (ค่าเริ่มต้น `0`)	จัดลำดับรายการใหม่ด้วยภาพโดยไม่เปลี่ยน HTML ตัวเลขต่ำจะแสดงก่อน ค่าลบจะย้ายรายการไปไว้ตอนต้น
`flex-grow`	ตัวเลข (ค่าเริ่มต้น `0`)	กำหนดว่ารายการนี้ควรดูดซับพื้นที่ว่างของคอนเทนเนอร์มากน้อยเพียงใดเมื่อเทียบกับพี่น้อง ค่า `1` ในทุกรายการจะแบ่งพื้นที่เท่าๆ กัน
`flex-shrink`	ตัวเลข (ค่าเริ่มต้น `1`)	กำหนดว่ารายการสามารถหดตัวได้มากน้อยเพียงใดเมื่อพื้นที่ไม่พอ `0` หมายถึงไม่หดตัวเลย — รายการจะรักษาขนาดที่ประกาศไว้
`flex-basis`	`auto` · ความยาว · เปอร์เซ็นต์	กำหนดขนาดเริ่มต้นของรายการก่อนกระจายพื้นที่ว่าง เป็นการกำหนดขนาดแกนหลัก "ในอุดมคติ" ของรายการ
`align-self`	`auto` · เหมือนกับ `align-items`	เขียนทับ `align-items` ของคอนเทนเนอร์สำหรับรายการเดียว

justify-content และ align-items ต่างกันอย่างไร?

justify-content ควบคุมการจัดตำแหน่งตาม แกนหลัก (main axis) ในขณะที่ align-items ควบคุมการจัดตำแหน่งตาม แกนรอง (cross axis) แกนหลักคือทิศทางใดก็ตามที่ flex-direction กำหนดไว้ — แนวนอนสำหรับ row, แนวตั้งสำหรับ column เมื่อคุณเปลี่ยน flex-direction จาก row เป็น column แกนทั้งสองจะสลับกัน ดังนั้น justify-content จะกลายเป็นแนวตั้งและ align-items จะกลายเป็นแนวนอน การสลับนี้เป็นหนึ่งในสาเหตุของความสับสนที่พบบ่อยที่สุดเมื่อผู้คนเรียนรู้ Flexbox; ตัวบ่งชี้แกนของพื้นที่ทดลองที่อยู่ใต้ตัวอย่างจะช่วยให้มองเห็นภาพนี้ได้ชัดเจน

จะจัดองค์ประกอบให้อยู่กึ่งกลางด้วย Flexbox ได้อย่างไร?

ในการจัดตำแหน่งองค์ประกอบเดียวให้卧ู่กึ่งกลางทั้งแนวนอนและแนวตั้ง:

โค้ดสามบรรทัด:
display: flex;
justify-content: center; /* แนวนอน */
align-items: center; /* แนวตั้ง */

นี่คือการแทนที่สมัยใหม่สำหรับวิธีแก้ขัดแบบเก่าที่ใช้ margin: auto, transform: translate(-50%, -50%) หรือ position: absolute ลองทำในพื้นที่ทดลองโดยเลือกพรีเซ็ต Modal Center

คำอธิบายเลย์เอาต์พรีเซ็ตในโลกจริง

เลย์เอาต์ Holy Grail

เลย์เอาต์หน้าสามคอลัมน์แบบคลาสสิก: แถบด้านข้างซ้าย, เนื้อหาหลัก, แถบด้านข้างขวา — พร้อมส่วนหัวและส่วนท้าย ในอดีตสร้างได้ยากมากด้วย floats; Flexbox ทำให้เป็นเรื่องง่าย คอลัมน์กลางใช้ flex: 1 เพื่อดูดซับพื้นที่แนวนอนที่เหลือทั้งหมด ในขณะที่คอลัมน์ด้านข้างจะคงความกว้างตามที่ประกาศไว้

Card Grid

แถวการ์ดที่ตัดขึ้นบรรทัดใหม่เมื่อมุมมองแคบลง ใช้ flex-wrap: wrap โดยการ์ดแต่ละใบมี flex: 1 1 240px หมายความว่าการ์ดจะขยายและหดตัวแต่จะไม่แคบกว่า 240px

Navbar

แถบนำทางแนวนอนที่มีโลโก้ทางซ้ายและลิงก์ทางขวา เคล็ดลับคือ justify-content: space-between โดยมีกลุ่มโลโก้และกลุ่มลิงก์เป็นลูกสองคน พร้อมคอนเทนเนอร์ flex ภายในสำหรับลิงก์เอง

Hero Section

กองแนวตั้งที่มีเนื้อหาจัดกึ่งกลางทั้งแนวนอนและแนวตั้ง — เหมาะสำหรับส่วนฮีโร่ของหน้าแลนดิ้งเพจ ใช้ flex-direction: column, justify-content: center และ align-items: center บนคอนเทนเนอร์ที่มีความสูงมาก

Modal Center

หน้าต่างโมดอลที่จัดกึ่งกลางอย่างสมบูรณ์แบบภายในโอเวอร์เลย์ ใช้สูตรการจัดกึ่งกลางสามบรรทัดเดียวกับที่แสดงด้านบน โดยใช้กับคอนเทนเนอร์โอเวอร์เลย์แบบเต็มหน้าจอ

Sticky Footer

ส่วนท้ายที่อยู่ที่ด้านล่างของหน้าจอเมื่อเนื้อหาสั้น แต่จะถูกดันลงไปเมื่อเนื้อหายาว ทำได้โดยกำหนดให้ body มี display: flex; flex-direction: column; min-height: 100vh และเนื้อหาหลักมี flex: 1

flex-grow, flex-shrink และ flex-basis ต่างกันอย่างไร?

คุณสมบัติทั้งสามนี้ (รวมอยู่ในตัวย่อ flex) อธิบายถึงวิธีการจัดการพื้นที่ของรายการ:

flex-basis กำหนดขนาด ในอุดมคติ ของรายการก่อนที่จะกระจายพื้นที่ว่าง ให้คิดซะว่าเป็น "จุดเริ่มต้น" ของรายการ
flex-grow บอกว่า "ถ้ามีพื้นที่เหลือ ให้เอาส่วนแบ่งนี้ไป" ค่า 0 หมายถึงปฏิเสธที่จะขยาย; 1 หมายถึงขยายตามสัดส่วน; 2 หมายถึงเอาส่วนแบ่งเป็นสองเท่าของรายการที่มี 1
flex-shrink บอกว่า "ถ้ามีพื้นที่ไม่พอ ให้หดตัวตามส่วนแบ่งนี้" ค่าเริ่มต้นคือ 1 (หดตัวตามสัดส่วน); 0 หมายถึงปฏิเสธที่จะหดตัว

ตัวย่อ flex: 1 จะขยายเป็น flex: 1 1 0% — ขยายเท่ากัน หดเท่ากัน พื้นฐานเป็นศูนย์ — หมายความว่าทุกรายการจะได้รับส่วนแบ่งที่เท่ากันในคอนเทนเนอร์โดยไม่คำนึงถึงเนื้อหา flex: auto ขยายเป็น flex: 1 1 auto ซึ่งจะเคารพขนาดเนื้อหาเป็นฐาน

เมื่อไหร่ควรใช้ Flexbox เทียบกับ Grid?

ใช้ Flexbox สำหรับเลย์เอาต์มิติเดียวที่รายการไหลไปในทิศทางเดียว — แถวของปุ่ม, แถบนำทาง, คอลัมน์การ์ดเดียว Flexbox รับรู้ถึงเนื้อหาและเหมาะมากเมื่อคุณต้องการให้รายการกำหนดขนาดตัวเอง

ใช้ CSS Grid สำหรับเลย์เอาต์สองมิติที่คุณต้องการควบคุมทั้งแถวและคอลัมน์พร้อมกัน — เลย์เอาต์หน้าเต็ม, แกลเลอรีรูปภาพ, แดชบอร์ด Grid รับรู้ถึงเลย์เอาต์และให้คุณวางรายการลงในแทร็กที่กำหนดไว้

ทั้งสองอย่างทำงานเสริมกัน ไม่ได้แข่งขันกัน การออกแบบจริงหลายอย่างรวมทั้งสองอย่างเข้าด้วยกัน: เลย์เอาต์หน้าแบบ Grid พร้อมแถบนำทาง Flexbox และแถวการ์ดภายใน

เคล็ดลับในการเชี่ยวชาญ Flexbox

จินตนาการแกนต่างๆ รู้เสมอว่าทิศทางไหนคือ "หลัก (main)" และทิศทางไหนคือ "รอง (cross)" — ป้ายกำกับแกนของพื้นที่ทดลองทำให้สิ่งนี้ชัดเจน
ใช้ gap แทน margins เบราว์เซอร์สมัยใหม่รองรับ gap บนคอนเทนเนอร์ flex อย่างสมบูรณ์แล้ว และช่วยกำจัดความจำเป็นในการใช้ทริค margin ที่ยุ่งยากสำหรับรายการสุดท้าย
เลือกใช้ flex: 1 เมื่อคุณต้องการให้รายการแบ่งปันพื้นที่เท่ากัน ตัวย่อนี้เกือบจะเป็นสิ่งที่คุณต้องการเสมอ
min-width: 0 บนรายการ flex รายการมีขนาดความกว้างขั้นต่ำโดยนัยตามเนื้อหา หากสตริงยาวๆ ที่ตัดคำไม่ได้ (เช่น URL) ทำให้เลย์เอาต์ของคุณล้น ให้ตั้งค่า min-width: 0 บนรายการเพื่อเขียนทับสิ่งนี้
หลีกเลี่ยงความกว้างแบบเปอร์เซ็นต์เพียงอย่างเดียว การผสมผสานความกว้างแบบเปอร์เซ็นต์กับ flex-grow อาจให้ผลลัพธ์ที่น่าประหลาดใจ แนะนำให้ใช้ flex-basis พร้อมค่าเริ่มต้นที่เหมาะสม

การรองรับเบราว์เซอร์และความเข้ากันได้

CSS Flexbox รองรับในเบราว์เซอร์สมัยใหม่ทุกตัว รวมถึง Chrome, Firefox, Safari, Edge และเบราว์เซอร์มือถือหลักทั้งหมด คุณสมบัติ gap ในคอนเทนเนอร์ flex ได้รับการรองรับจากเบราว์เซอร์ทั่วไปในปี 2021 สำหรับเบราว์เซอร์รุ่นเก่า (IE10/11) จำเป็นต้องมี vendor prefixes และมีบั๊กที่บันทึกไว้หลายจุด สำหรับกลุ่มผู้ชมเหล่านั้น ให้พิจารณา flexbugs

คำถามที่พบบ่อย

ทำไมรายการ flex ของฉันถึงล้นคอนเทนเนอร์?

รายการ flex มี min-width: auto โดยนัยตามเนื้อหา คำที่ยาว, บล็อกโค้ด หรือข้อความที่จัดรูปแบบไว้ก่อนหน้าสามารถบังคับให้รายการกว้างกว่าคอนเทนเนอร์ได้ แก้ไขโดยตั้งค่า min-width: 0 บนรายการ (หรือ min-height: 0 สำหรับเลย์เอาต์คอลัมน์)

space-between, space-around และ space-evenly ต่างกันอย่างไร?

space-between จะไม่เว้นที่ว่างที่ปลายทั้งสองข้างและมีระยะห่างระหว่างรายการเท่ากัน space-around จะเว้นช่องว่างครึ่งหนึ่งที่ปลายแต่ละด้านและช่องว่างเต็มระหว่างรายการ space-evenly จะเว้นที่ว่างเท่ากันทั้งที่ปลายและระหว่างรายการ ลองเปลี่ยนค่าในพื้นที่ทดลองเพื่อสัมผัสความแตกต่าง

ฉันสามารถทำแอนิเมชันคุณสมบัติ flex ได้หรือไม่?

ได้ flex-grow, flex-shrink, flex-basis, order และ gap สามารถทำ transition ได้ ส่วนการทำแอนิเมชัน flex-direction, justify-content และ align-items ไม่ได้รับการรองรับเนื่องจากเป็นคุณสมบัติที่กำหนดเป็นค่าเฉพาะตัว

พื้นที่ทดลองนี้ทำงานแบบออฟไลน์ได้หรือไม่?

การคำนวณ Flexbox ทั้งหมดเกิดขึ้นในเบราว์เซอร์ของคุณโดยใช้ CSS ดั้งเดิม เมื่อโหลดหน้าเว็บแล้ว คุณสามารถใช้พื้นที่ทดลองได้โดยไม่ต้องเชื่อมต่ออินเทอร์เน็ต — ไม่มีการเรียก API หรือการคำนวณฝั่งเซิร์ฟเวอร์

โค้ดที่สร้างขึ้นพร้อมใช้งานจริงหรือไม่?

ใช่ CSS ที่ส่งออกใช้คุณสมบัติมาตรฐานที่รองรับในเบราว์เซอร์สมัยใหม่ทุกตัว HTML ใช้ชื่อคลาสที่มีความหมาย (flex-container, flex-item) ซึ่งคุณสามารถเปลี่ยนชื่อเพื่อให้เข้ากับรูปแบบของโปรเจกต์ของคุณได้