Flexbox สำหรับการจัดวาง
ใช้ Flexbox จัดแนวองค์ประกอบในแถวหรือคอลัมน์ กระจายพื้นที่ และตัดบรรทัดเนื้อหาโดยไม่ต้องใช้เทคนิค float
Flexbox สำหรับการจัดวาง เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
Flexbox คืออะไร
Flexbox (เค้าโครงกล่องแบบยืดหยุ่น) คือรูปแบบเค้าโครง CSS ที่ออกแบบมาสำหรับเค้าโครงแบบมิติเดียว โดยกระจายพื้นที่ไปตามแถวหรือคอลัมน์เดียว ช่วยแก้ปัญหาที่เค้าโครงแบบ float จัดการได้ไม่อย่างเหมาะสม
การเปิดใช้ Flexbox
ใช้ display: flex กับ container ลูกโดยตรงของ container จะกลายเป็น รายการแบบยืดหยุ่น โดยอัตโนมัติ ส่วนลูกของรายการเหล่านั้นจะไม่ได้รับผลกระทบ
.container {
display: flex;
}
/* All direct children are now flex items */flex-direction
กำหนดแกนหลัก row (ค่าเริ่มต้น): จัดรายการจากซ้ายไปขวา row-reverse: จากขวาไปซ้าย column: จากบนลงล่าง column-reverse: จากล่างขึ้นบน
.stack { display: flex; flex-direction: column; }
.row { display: flex; flex-direction: row; }justify-content — การจัดแนวตามแกนหลัก
กระจายพื้นที่ตามแกนหลัก ได้แก่ flex-start (ค่าเริ่มต้น), flex-end, center, space-between, space-around และ space-evenly
.nav {
display: flex;
justify-content: space-between; /* logo left, links right */
}
.centered {
display: flex;
justify-content: center; /* items in the middle */
}align-items — การจัดแนวตามแกนขวาง
จัดแนวรายการตามแกนขวาง (ตั้งฉากกับแกนหลัก) ได้แก่ stretch (ค่าเริ่มต้น), center, flex-start, flex-end และ baseline
.card {
display: flex;
align-items: center; /* vertically center content */
}คุณสมบัติ gap
gap: row-gap column-gap จะเพิ่มพื้นที่ระหว่างรายการแบบยืดหยุ่นโดยไม่ต้องใช้ margin สะอาดกว่าวิธีแก้ด้วย margin มาก และเบราว์เซอร์สมัยใหม่รองรับอย่างแพร่หลาย
.grid {
display: flex;
flex-wrap: wrap;
gap: 24px; /* 24px in all directions between items */
gap: 16px 24px; /* row-gap column-gap */
}flex-wrap
ตามค่าเริ่มต้น รายการแบบยืดหยุ่นจะเบียดกันอยู่ในบรรทัดเดียว flex-wrap: wrap อนุญาตให้รายการขึ้นบรรทัดใหม่เมื่อวางไม่พอดี เมื่อนำมาใช้ร่วมกับ gap จะได้กริดแบบตอบสนองที่เรียบง่าย
.cards {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card {
flex: 1 1 280px; /* grow, shrink, min-width */
}ชวเลข flex บนรายการ
flex: grow shrink basis บนรายการแบบยืดหยุ่น flex: 1 เป็นชวเลขของ 1 1 0% รายการจะขยายเท่ากันและไม่สนใจขนาดเนื้อหา flex: 0 0 200px จะสร้างรายการที่มีขนาดคงที่ 200px
.sidebar { flex: 0 0 240px; } /* fixed width */
.main { flex: 1; } /* takes remaining space */align-self
align-self บนรายการแบบยืดหยุ่นจะแทนที่ align-items ของ container สำหรับรายการนั้นเพียงรายการเดียว เหมาะสำหรับทำให้รายการหนึ่งจัดแนวแตกต่างจากรายการข้างเคียง
.container { display: flex; align-items: center; }
.tall-item { align-self: flex-start; }คุณสมบัติ order
order ควบคุมลำดับการแสดงผลของรายการแบบยืดหยุ่นโดยไม่เปลี่ยนลำดับ HTML ค่าเริ่มต้นคือ 0 ค่าที่ต่ำกว่าจะปรากฏก่อน ควรใช้อย่างจำกัด เพราะจะทำให้ลำดับที่มองเห็นไม่ตรงกับลำดับใน DOM และลำดับการอ่าน
การจัดกึ่งกลางด้วย Flexbox
วิธีที่ง่ายที่สุดในการจัดองค์ประกอบให้อยู่กึ่งกลางทั้งแนวนอนและแนวตั้ง คือกำหนด parent เป็น display: flex; justify-content: center; align-items: center
.overlay {
position: fixed;
inset: 0; /* shorthand for top/right/bottom/left: 0 */
display: flex;
justify-content: center;
align-items: center;
background: rgba(0,0,0,0.5);
}ตรวจสอบความเข้าใจ
คุณสมบัติ Flexbox ใดใช้กระจายพื้นที่ระหว่างรายการตาม แกนหลัก
สรุป: พื้นฐาน Flexbox
ใช้ display: flex กับ container ใช้ flex-direction: row หรือ column เพื่อกำหนดแกน ใช้ justify-content สำหรับการจัดระยะตามแกนหลัก ใช้ align-items สำหรับแกนขวาง ใช้ gap สำหรับช่องว่างระหว่างรายการ ใช้ flex-wrap สำหรับหลายบรรทัด และใช้ชวเลข flex บนรายการเพื่อควบคุมการขยาย ระบบเค้าโครงแบบมิติเดียวที่ยืดหยุ่นและใช้งานได้หลากหลาย
คำถามที่พบบ่อย
บทเรียน “Flexbox สำหรับการจัดวาง” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “Flexbox สำหรับการจัดวาง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “Flexbox สำหรับการจัดวาง”
ใช้ Flexbox จัดแนวองค์ประกอบในแถวหรือคอลัมน์ กระจายพื้นที่ และตัดบรรทัดเนื้อหาโดยไม่ต้องใช้เทคนิค float คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “Flexbox สำหรับการจัดวาง” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม
ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- เมตาแท็ก viewport
- Flexbox สำหรับการจัดวาง
- CSS Grid สำหรับการจัดวาง
- มีเดียคิวรีและการพัฒนาแบบมือถือเป็นอันดับแรก