0Pricing
Frontend Academy · บทเรียน

เจาะลึก Flexbox: การจัดแนว การตัดบรรทัด และลำดับ

เชี่ยวชาญ justify-content, align-items, align-self, flex-wrap, flex-grow, flex-shrink, flex-basis และคุณสมบัติ order

เจาะลึก Flexbox: การจัดแนว การตัดบรรทัด และลำดับ เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

ทบทวน: คอนเทนเนอร์และรายการแบบยืดหยุ่น

สรุป: การกำหนด display: flex ให้คอนเทนเนอร์จะสร้างรายการแบบยืดหยุ่นจากองค์ประกอบลูกโดยตรง แกนหลัก จะทอดไปตาม flex-direction ส่วน แกนขวาง จะตั้งฉากกับแกนหลัก

ค่า justify-content โดยละเอียด

ค่า justify-content ทั้งหมดบนคอนเทนเนอร์ที่มีทิศทางเป็นแถว ได้แก่ flex-start (ค่าเริ่มต้น), flex-end, center, space-between (มีช่องว่างเฉพาะระหว่างรายการ), space-around (มีระยะขอบเท่ากันรอบแต่ละรายการ) และ space-evenly (มีช่องว่างเท่ากันทุกตำแหน่ง)

.row { display: flex; }
.space-between { justify-content: space-between; }
.space-around   { justify-content: space-around; }
.space-evenly   { justify-content: space-evenly; }
.center         { justify-content: center; }

align-items เทียบกับ align-content

align-items จัดแนวรายการภายในบรรทัดเดียว ส่วน align-content จัดแนวหลายบรรทัด (จะทำงานเมื่อ flex-wrap เป็น wrap และมีหลายบรรทัดเท่านั้น)

.single-line { display: flex; align-items: center; }

.multi-line {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between; /* space between rows */
}

align-self สำหรับรายการแต่ละรายการ

align-self จะเขียนทับ align-items สำหรับรายการแบบยืดหยุ่นรายการใดรายการหนึ่งโดยเฉพาะ มีประโยชน์เมื่อต้องการให้รายการหนึ่งยืดเต็มพื้นที่ ขณะที่รายการอื่นจัดอยู่ตรงกลาง

.container { display: flex; align-items: center; height: 200px; }
.card { background: #e2e8f0; padding: 16px; }
.card.stretch { align-self: stretch; } /* overrides center */

flex-wrap: wrap และ wrap-reverse

flex-wrap: wrap อนุญาตให้รายการไหลไปยังบรรทัดใหม่ ส่วน wrap-reverse จะตัดบรรทัดในทิศทางย้อนกลับ ใช้ร่วมกับ gap เพื่อสร้างกริดแบบตอบสนองอย่างง่าย

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.card-grid > * {
  flex: 1 1 280px; /* grow, shrink, min-width */
  max-width: 400px;
}

flex-grow, flex-shrink และ flex-basis

นี่คือรูปแบบย่อแบบสามส่วนสำหรับรายการแบบยืดหยุ่น flex-grow: สัดส่วนของพื้นที่ว่างที่มีอยู่ flex-shrink: อัตราการหดตัวเมื่อพื้นที่ไม่เพียงพอ และ flex-basis: ขนาดเริ่มต้นก่อนการขยายหรือหดตัว

.sidebar { flex: 0 0 250px; }  /* don't grow, don't shrink, 250px */
.main    { flex: 1 1 0%; }     /* grow to fill, shrink, no base */
.fixed   { flex: 0 0 100px; }  /* fixed 100px */

รูปแบบย่อของ flex ที่ใช้บ่อย

flex: 1 = 1 1 0% flex: auto = 1 1 auto flex: none = 0 0 auto และ flex: 2 = 2 1 0% (ใช้พื้นที่มากกว่า flex: 1 เป็นสองเท่า)

พร็อพเพอร์ตี order

order เปลี่ยนลำดับการแสดงผลของรายการแบบยืดหยุ่นโดยไม่แก้ไข HTML ค่าเริ่มต้นคือ 0 ค่าติดลบจะแสดงก่อน 0 โปรดใช้ด้วยความระมัดระวัง เพราะลำดับการแสดงผลที่ไม่ตรงกับลำดับใน DOM อาจทำให้ผู้ใช้แป้นพิมพ์และโปรแกรมอ่านหน้าจอสับสน

.sidebar { order: -1; }  /* appears first visually regardless of DOM order */
.main    { order: 0; }   /* default */

min-width: 0 เพื่อแก้ปัญหาเนื้อหาล้น

รายการแบบยืดหยุ่นมีค่า min-width: auto โดยปริยาย ซึ่งหมายความว่ารายการจะไม่หดเล็กกว่าขนาดเนื้อหาของตน กำหนด min-width: 0 เพื่อให้รายการหดเล็กลงได้ ซึ่งจำเป็นสำหรับการตัดข้อความภายในรายการแบบยืดหยุ่น

.flex-item {
  min-width: 0;  /* allows shrinking below content size */
}
.flex-item span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

ช่องว่างของเฟล็กซ์โดยไม่ใช้ gap

ในสภาพแวดล้อมรุ่นเก่าที่ไม่รองรับ gap ให้ใช้ระยะขอบกับรายการและระยะขอบติดลบกับคอนเทนเนอร์เพื่อสร้างช่องว่างระหว่างรายการ แต่ปัจจุบันเบราว์เซอร์รุ่นใหม่ทั้งหมดรองรับ gap แล้ว จึงควรเลือกใช้สิ่งนี้

คอนเทนเนอร์แบบยืดหยุ่นซ้อนกัน

รายการแบบยืดหยุ่นทุกรายการสามารถเป็นคอนเทนเนอร์แบบยืดหยุ่นได้เช่นกัน คุณสามารถซ้อนเฟล็กซ์บ็อกซ์สำหรับรูปแบบการจัดวางที่ซับซ้อนได้ เช่น แถวของการ์ดที่จัดองค์ประกอบภายในของแต่ละการ์ดด้วยเฟล็กซ์เช่นกัน นี่เป็นรูปแบบปกติในการจัดวางสมัยใหม่

.card {
  display: flex;
  flex-direction: column;
}
.card-body {
  flex: 1;  /* push footer to the bottom */
}
.card-footer {
  margin-top: auto; /* or use flex: 0 on footer */
}

ตรวจสอบอย่างรวดเร็ว

พร็อพเพอร์ตีใดกระจายพื้นที่ระหว่างรายการแบบยืดหยุ่นตามแกนขวาง เมื่อ flex-wrap เป็น wrap

ทบทวน: เจาะลึกเฟล็กซ์บ็อกซ์

ใช้ justify-content เพื่อกระจายตามแกนหลัก ใช้ align-items สำหรับแกนขวางในบรรทัดเดียว ใช้ align-content สำหรับแกนขวางหลายบรรทัด ใช้ align-self กับรายการแต่ละรายการ flex-wrap: wrap ทำให้มีหลายบรรทัด รูปแบบย่อของ flex ควบคุมการขยาย การหดตัว และขนาดพื้นฐาน order เปลี่ยนลำดับการแสดงผล และ min-width: 0 ป้องกันข้อผิดพลาดจากการหดตัว

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

บทเรียน “เจาะลึก Flexbox: การจัดแนว การตัดบรรทัด และลำดับ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “เจาะลึก Flexbox: การจัดแนว การตัดบรรทัด และลำดับ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “เจาะลึก Flexbox: การจัดแนว การตัดบรรทัด และลำดับ”

เชี่ยวชาญ justify-content, align-items, align-self, flex-wrap, flex-grow, flex-shrink, flex-basis และคุณสมบัติ order คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “เจาะลึก Flexbox: การจัดแนว การตัดบรรทัด และลำดับ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. เจาะลึก Flexbox: การจัดแนว การตัดบรรทัด และลำดับ
  2. CSS Grid: template-areas, auto-fit และ minmax
  3. การใช้ Flexbox และ Grid ร่วมกัน
  4. ตัวแปร CSS สำหรับการกำหนดธีม
← กลับไปที่ Frontend Academy