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

Flex Wrap และ Align-Content

อนุญาตให้รายการ flex ขึ้นบรรทัดใหม่หลายบรรทัด และจัดแนวบรรทัดที่ตัดด้วย align-content

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

flex-wrap: nowrap (ค่าเริ่มต้น)

โดยค่าเริ่มต้น รายการเฟล็กซ์จะ< strong>ไม่ตัดบรรทัด หากรายการมีขนาดเกินความกว้างของคอนเทนเนอร์ รายการจะหดตัวหรือล้นออกไปแทนที่จะย้ายไปบรรทัดใหม่

flex-wrap: wrap

เมื่อใช้ flex-wrap: wrap รายการที่ล้นแกนหลักจะย้ายไปบรรทัดใหม่ (หรือคอลัมน์ใหม่ในทิศทางแบบคอลัมน์) แต่ละบรรทัดที่เกิดจากการตัดจะทำหน้าที่เหมือนคอนเทนเนอร์เฟล็กซ์ขนาดเล็กแยกกัน

<div class="card-grid">
    <div>Card 1</div>
    <div>Card 2</div>
    <div>Card 3</div>
    <div>Card 4</div>
    <div>Card 5</div>
  </div>

flex-wrap: wrap-reverse

wrap-reverse จะตัดรายการไปในทิศทางตรงข้ามของแกนตัดขวาง โดยบรรทัดใหม่จะปรากฏด้านบน (ในทิศทางแบบแถว) แทนที่จะอยู่ด้านล่าง

รูปแบบการตัดบรรทัดของการ์ด

การจัดวางการ์ดแบบตอบสนองที่ใช้กันทั่วไป โดยการ์ดจะย้ายไปแถวถัดไปเมื่อพื้นที่แสดงผลแคบลง:

<div class="cards">
    <div class="card">Card A</div>
    <div class="card">Card B</div>
    <div class="card">Card C</div>
  </div>

align-content สำหรับหลายบรรทัด

align-content ควบคุมระยะห่างระหว่างบรรทัดที่ถูกตัดบนแกนตัดขวาง คุณสมบัตินี้จะไม่มีผลเมื่อมีเพียงบรรทัดเดียว ค่าที่ใช้จะสอดคล้องกับ justify-content

ค่าของ align-content

ค่าที่ใช้ได้มีดังนี้:

  • flex-start — รวมบรรทัดเข้าหาจุดเริ่มต้นของแกนตัดขวาง
  • flex-end — รวมบรรทัดเข้าหาจุดปลายของแกนตัดขวาง
  • center — จัดบรรทัดให้อยู่กึ่งกลาง
  • space-between — เว้นช่องว่างระหว่างบรรทัดเท่ากัน
  • space-around — เว้นช่องว่างรอบบรรทัดเท่ากัน
  • stretch — ขยายบรรทัดให้เต็มพื้นที่ (ค่าเริ่มต้น)
<div class="gallery">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>

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

ความแตกต่าง:

  • align-items — จัดรายการภายในแต่ละบรรทัดเฟล็กซ์
  • align-content — จัดแนวบรรทัดเฟล็กซ์ภายในคอนเทนเนอร์

ช่องว่างในเฟล็กซ์

คุณสมบัติ gap (ก่อนหน้านี้คือ grid-gap) เพิ่มช่องว่างที่สม่ำเสมอระหว่างรายการเฟล็กซ์โดยไม่ต้องใช้ระยะขอบ และใช้ได้ทั้งกับช่องว่างระหว่างแถวและคอลัมน์

<div class="flex-grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>

การตัดบรรทัดแบบตอบสนองโดยไม่ใช้คิวรีสื่อ

ตัดบรรทัดอัตโนมัติให้มีจำนวนคอลัมน์มากเท่าที่ขนาดในอุดมคติที่กำหนดจะรองรับ โดยไม่ต้องใช้คิวรีสื่อ:

<div class="grid">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
  </div>

รูปแบบย่อ flex-flow

flex-flow รวม flex-direction และ flex-wrap ไว้ในการประกาศเดียว:

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>

การตัดบรรทัดเทียบกับกริด

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

ตรวจสอบความเข้าใจ

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

สรุปทบทวน

flex-wrap: wrap อนุญาตให้รายการไหลไปยังบรรทัดใหม่ align-content ควบคุมระยะห่างระหว่างบรรทัดเหล่านี้ในคอนเทนเนอร์หลายบรรทัด ใช้ gap เพื่อกำหนดระยะห่างที่สม่ำเสมอ รวม flex: 1 1 250px กับ flex-wrap เพื่อสร้างกริดการ์ดแบบตอบสนองโดยไม่ใช้คิวรีสื่อ

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

บทเรียน “Flex Wrap และ Align-Content” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “Flex Wrap และ Align-Content”

อนุญาตให้รายการ flex ขึ้นบรรทัดใหม่หลายบรรทัด และจัดแนวบรรทัดที่ตัดด้วย align-content คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

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

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

บทเรียน “Flex Wrap และ Align-Content” ใช้เวลานานแค่ไหน

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

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

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

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

  1. Display Flex และทิศทาง Flex
  2. Justify-Content และ Align-Items
  3. Flex Wrap และ Align-Content
  4. Flex Grow Shrink และ Basis
← กลับไปที่ CSS Academy