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

Display Flex และทิศทาง Flex

เปิดใช้ flexbox กับพื้นที่บรรจุ และควบคุมทิศทางแกนหลักด้วย flex-direction

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

การเปิดใช้เฟล็กซ์บ็อกซ์

เปิดใช้เฟล็กซ์บ็อกซ์โดยกำหนด display: flex ให้กับ องค์ประกอบคอนเทนเนอร์ (หรือ คอนเทนเนอร์เฟล็กซ์) ส่วนองค์ประกอบลูกโดยตรงจะกลายเป็น รายการเฟล็กซ์ โดยอัตโนมัติ

<nav class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

เฟล็กซ์แบบอินไลน์

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

<p>Status: <span class="badge">🔥 Trending</span></p>

แกนหลักและแกนตัดขวาง

เฟล็กซ์บ็อกซ์มีสองแกน:

  • แกนหลัก: ทิศทางหลักที่ใช้จัดวางรายการ
  • แกนตัดขวาง: แกนที่ตั้งฉากกับแกนหลัก

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

flex-direction: row (ค่าเริ่มต้น)

ทิศทางเริ่มต้นคือ row โดยรายการจะวางจากซ้ายไปขวาตามแกนหลักแนวนอน

<nav class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

flex-direction: column

flex-direction: column จะเรียงรายการในแนวตั้ง แกนหลักจึงกลายเป็นแนวตั้ง ส่วนแกนตัดขวางกลายเป็นแนวนอน

<div class="sidebar">
    <div>Dashboard</div>
    <div>Reports</div>
    <div>Settings</div>
  </div>

flex-direction: row-reverse

row-reverse จะกลับทิศทางแนวนอน โดยวางรายการจากขวาไปซ้าย จุดเริ่มต้นของแกนหลักจึงอยู่ทางขวา

<nav class="rtl-nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

flex-direction: column-reverse

column-reverse จะเรียงรายการจากล่างขึ้นบน รายการสุดท้ายจึงปรากฏอยู่ด้านบน

<div class="chat-list">
    <div>Hey there!</div>
    <div>How are you?</div>
    <div>Doing great, thanks!</div>
  </div>

flex-direction มีผลต่อคุณสมบัติของเฟล็กซ์ทั้งหมด

เมื่อเปลี่ยน flex-direction ทิศทางของ justify-content ก็จะเปลี่ยนไปด้วย หากทิศทางเป็น column justify-content จะจัดแนวตามแกนแนวตั้ง ไม่ใช่แกนแนวนอน

การจัดวางแนวนอนอย่างง่าย

กรณีใช้งานเฟล็กซ์บ็อกซ์ที่ง่ายที่สุด — จัดรายการในแถบนำทางให้อยู่กึ่งกลาง:

<nav class="nav">
    <div>Logo</div>
    <a href="#">Home</a>
    <a href="#">Pricing</a>
    <a href="#">Contact</a>
  </nav>

การจัดวางแนวตั้งอย่างง่าย

จัดเนื้อหาของการ์ดให้อยู่กึ่งกลางทั้งในแนวตั้งและแนวนอน:

<div class="card">
    <h3>Welcome</h3>
    <p>Centered content</p>
  </div>

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

flex-flow เป็นรูปแบบย่อของ flex-direction และ flex-wrap:

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

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

เมื่อกำหนด flex-direction: column แล้ว justify-content จะควบคุมแกนใด

สรุปทบทวน

กำหนด display: flex ให้กับคอนเทนเนอร์เพื่อสร้างบริบทเฟล็กซ์สำหรับองค์ประกอบลูก flex-direction กำหนดทิศทางของแกนหลัก ได้แก่ row (แนวนอน) หรือ column (แนวตั้ง) คุณสมบัติการจัดแนวของเฟล็กซ์ทั้งหมดจะอ้างอิงแกนเหล่านี้ ไม่ใช่ทิศทางซ้าย/ขวา/ขึ้น/ลงแบบตายตัว

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

บทเรียน “Display Flex และทิศทาง Flex” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “Display Flex และทิศทาง Flex”

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

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

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

บทเรียน “Display Flex และทิศทาง Flex” ใช้เวลานานแค่ไหน

บทเรียน 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