Tailwind CSS Academy · บทเรียน

การตัดบรรทัดและช่องว่าง

จัดการเนื้อหาล้นด้วย flex-wrap และ flex-nowrap และใช้ยูทิลิตี gap-* เพื่อกำหนดช่องว่างระหว่างรายการ flex ให้สม่ำเสมอ

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

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

Flex Overflow: The Default Behavior

By default, flex containers use flex-nowrap — all flex items are forced onto a single line, even if they overflow the container's width. The browser will compress flex items as much as possible before allowing overflow. This is the desired behavior for navbars and single-row layouts, but for card grids and tag lists, you typically want items to wrap onto multiple lines when they run out of room.

<!-- No wrap: items overflow when too many -->
<div class="flex w-64 bg-gray-100 p-2">
  <div class="bg-blue-400 p-2 m-1">Item 1</div>
  <div class="bg-blue-400 p-2 m-1">Item 2</div>
  <div class="bg-blue-400 p-2 m-1">Item 3</div>
  <div class="bg-blue-400 p-2 m-1">Item 4</div>
</div>

flex-wrap: Enabling Multi-Line Layout

flex-wrap tells flex children to wrap onto a new line when they run out of horizontal space. Each line is an independent flex row. This is essential for tag clouds, card grids, and chip groups where the number of items is variable or unknown. Once wrapping is enabled, items naturally reflow as the container grows or shrinks.

<!-- Tags that wrap to new lines -->
<div class="flex flex-wrap gap-2">
  <span class="bg-indigo-100 text-indigo-700 px-3 py-1 rounded-full text-sm font-medium">JavaScript</span>
  <span class="bg-green-100 text-green-700 px-3 py-1 rounded-full text-sm font-medium">Python</span>
  <span class="bg-blue-100 text-blue-700 px-3 py-1 rounded-full text-sm font-medium">TypeScript</span>
  <span class="bg-pink-100 text-pink-700 px-3 py-1 rounded-full text-sm font-medium">React</span>
  <span class="bg-yellow-100 text-yellow-700 px-3 py-1 rounded-full text-sm font-medium">Vue</span>
  <span class="bg-red-100 text-red-700 px-3 py-1 rounded-full text-sm font-medium">Angular</span>
</div>

flex-wrap-reverse

flex-wrap-reverse enables wrapping but in reverse direction — new lines appear above the existing ones rather than below. The visual result is that the last row of items appears at the top. This is rarely used in practice but is available when you need items to fill from the bottom of the container upward, such as in chat message lists or bottom-anchored layouts.

<!-- Wrap reverse: lines fill from bottom to top -->
<div class="flex flex-wrap-reverse gap-2 h-24 content-start">
  <div class="bg-indigo-200 p-3 rounded">A</div>
  <div class="bg-indigo-200 p-3 rounded">B</div>
  <div class="bg-indigo-200 p-3 rounded">C</div>
  <div class="bg-indigo-200 p-3 rounded">D</div>
  <div class="bg-indigo-200 p-3 rounded">E</div>
</div>

flex-nowrap: Forcing Single Line

flex-nowrap explicitly enforces the default single-line behavior. You write it when overriding a parent's flex-wrap at a specific breakpoint. For example, a tag group that wraps on mobile (flex-wrap) but should stay on one line on desktop (md:flex-nowrap). Always consider overflow-hidden or overflow-x-auto alongside flex-nowrap to handle the overflow gracefully.

<!-- Wraps on mobile, single row on desktop -->
<div class="flex flex-wrap md:flex-nowrap gap-2 overflow-x-auto">
  <span class="flex-none bg-indigo-100 text-indigo-700 px-3 py-1 rounded-full text-sm">Tag One</span>
  <span class="flex-none bg-indigo-100 text-indigo-700 px-3 py-1 rounded-full text-sm">Tag Two</span>
  <span class="flex-none bg-indigo-100 text-indigo-700 px-3 py-1 rounded-full text-sm">Tag Three</span>
</div>

gap-*: The Modern Way to Space Items

The gap-* utility (CSS gap) adds space between flex and grid items — not outside the container, not inside each item, but purely in the gutters between them. Use gap-4 for a 16px gap between all items. This is superior to using margin on items because it does not add unwanted space before the first or after the last item.

<!-- gap-4: 16px between all items in both directions -->
<div class="flex flex-wrap gap-4">
  <div class="bg-blue-100 p-4 rounded-lg">Card A</div>
  <div class="bg-blue-100 p-4 rounded-lg">Card B</div>
  <div class="bg-blue-100 p-4 rounded-lg">Card C</div>
</div>

gap-x-* and gap-y-*: Axis-Specific Gaps

When you need different horizontal and vertical gaps, use the axis-specific variants. gap-x-* sets the column gap (horizontal space between items). gap-y-* sets the row gap (vertical space between wrapped rows). A common case: a card grid where columns need a larger gap than rows, or vice versa.

<!-- More horizontal space than vertical between cards -->
<div class="flex flex-wrap gap-x-8 gap-y-4">
  <div class="w-40 bg-green-100 p-4 rounded-lg">Card 1</div>
  <div class="w-40 bg-green-100 p-4 rounded-lg">Card 2</div>
  <div class="w-40 bg-green-100 p-4 rounded-lg">Card 3</div>
  <div class="w-40 bg-green-100 p-4 rounded-lg">Card 4</div>
</div>

gap-* vs space-* vs Margin

There are three ways to space flex children: gap-*, space-x-*/space-y-*, and margin on each child. gap-* is the cleanest: it only adds space between items and works in flex and grid. space-x-* uses margins and works with non-flex elements. Direct margin on children gives maximum control but requires remembering to exclude it from the first and last item. For flex and grid, always prefer gap-*.

<!-- Prefer gap-* for flex and grid layouts -->
<div class="flex gap-4">       <!-- cleanest -->
  <div>A</div><div>B</div><div>C</div>
</div>

<div class="flex space-x-4">  <!-- works, uses margins -->
  <div>A</div><div>B</div><div>C</div>
</div>

Responsive Gap Adjustments

Gaps often need to increase on larger viewports where there is more room. Use responsive prefixes on gap-*: gap-2 md:gap-4 lg:gap-6 produces a compact grid on mobile and more generous spacing on desktop. This single change transforms the feel of a layout from 'mobile-squeezed' to 'desktop-spacious' without any other adjustments.

<div class="flex flex-wrap gap-2 md:gap-4 lg:gap-6">
  <div class="flex-1 min-w-48 bg-white rounded-xl shadow p-4 md:p-6">Card A</div>
  <div class="flex-1 min-w-48 bg-white rounded-xl shadow p-4 md:p-6">Card B</div>
  <div class="flex-1 min-w-48 bg-white rounded-xl shadow p-4 md:p-6">Card C</div>
</div>

Auto-Responsive Grid With flex-wrap

The flex flex-wrap + min-w-* + flex-1 combination creates an automatically responsive grid without explicit breakpoints. Each item has a minimum width; when they cannot fit side by side, they wrap. Items in a row always fill the available space due to flex-1. This elegant pattern adapts to any container width without media query logic.

<!-- Auto-responsive: 1 column mobile, 2+ columns desktop -->
<div class="flex flex-wrap gap-6">
  <article class="flex-1 min-w-72 bg-white rounded-xl shadow p-6">
    <img src="thumb.jpg" class="w-full h-40 object-cover rounded-lg mb-4" alt="" />
    <h3 class="font-bold text-gray-900 mb-2">Article Title</h3>
    <p class="text-gray-500 text-sm">Short excerpt...</p>
  </article>
  <article class="flex-1 min-w-72 bg-white rounded-xl shadow p-6">
    <img src="thumb2.jpg" class="w-full h-40 object-cover rounded-lg mb-4" alt="" />
    <h3 class="font-bold text-gray-900 mb-2">Another Article</h3>
    <p class="text-gray-500 text-sm">Short excerpt...</p>
  </article>
</div>

Practical: Button Group With gap

Button groups — a row of related action buttons — are a perfect use case for flex gap-*. Small gaps like gap-2 (8px) keep buttons visually grouped while providing clear separation. Larger gaps like gap-4 make individual buttons feel more independent. Combine with flex-wrap so the group gracefully wraps on narrow screens.

<div class="flex flex-wrap gap-2">
  <button class="px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-lg">Save</button>
  <button class="px-4 py-2 bg-white border border-gray-300 text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-50">Cancel</button>
  <button class="px-4 py-2 bg-red-50 border border-red-200 text-red-600 text-sm font-medium rounded-lg hover:bg-red-100">Delete</button>
</div>

gap in Grid Layouts

The gap-* utility works identically in CSS Grid. grid grid-cols-3 gap-6 creates a three-column grid with 24px gutters between all cells in both row and column directions. This is one of the reasons gap-* is preferred over margin tricks — the same utility class handles both flex and grid contexts consistently.

<!-- Same gap utility, now in a grid context -->
<div class="grid grid-cols-2 md:grid-cols-3 gap-6">
  <div class="bg-gray-100 p-4 rounded-lg">Grid item 1</div>
  <div class="bg-gray-100 p-4 rounded-lg">Grid item 2</div>
  <div class="bg-gray-100 p-4 rounded-lg">Grid item 3</div>
  <div class="bg-gray-100 p-4 rounded-lg">Grid item 4</div>
  <div class="bg-gray-100 p-4 rounded-lg">Grid item 5</div>
</div>

Quick Check

Test your understanding of Tailwind CSS Mastery concepts from this lesson.

Lesson Recap

In this lesson you learned: flex-wrap allows items to wrap onto multiple lines when the container is too narrow, gap-* adds space between flex and grid items without affecting the outer container edges, and gap-x-* and gap-y-* control horizontal and vertical gaps independently. This completes the Flexbox With Tailwind course — next up we build two-dimensional layouts with CSS Grid through Tailwind's grid utilities.

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

บทเรียน “การตัดบรรทัดและช่องว่าง” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การตัดบรรทัดและช่องว่าง”

จัดการเนื้อหาล้นด้วย flex-wrap และ flex-nowrap และใช้ยูทิลิตี gap-* เพื่อกำหนดช่องว่างระหว่างรายการ flex ให้สม่ำเสมอ คุณปฏิบัติ Tailwind CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

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

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

บทเรียน “การตัดบรรทัดและช่องว่าง” ใช้เวลานานแค่ไหน

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

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

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

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

← กลับไปที่ Tailwind CSS Academy