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

Justify-Content และ Align-Items

กระจายรายการตามแกนหลักและแกนขวางด้วย justify-content และ align-items

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

คุณสมบัติการจัดแนวสำคัญสองรายการ

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

  • justify-content — จัดรายการตามแกนหลัก
  • align-items — จัดรายการตามแกนตัดขวาง

justify-content: flex-start

flex-start (ค่าเริ่มต้น) จะจัดรายการให้ชิดจุดเริ่มต้นของแกนหลัก ในทิศทาง row รายการจะชิดด้านซ้าย

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

justify-content: center

จัดรายการให้อยู่กึ่งกลางตามแกนหลัก เป็นวิธีจัดกึ่งกลางแนวนอนแบบคลาสสิกด้วยเฟล็กซ์บ็อกซ์

<div class="hero">
    <button>Get Started</button>
  </div>

justify-content: flex-end

จัดรายการให้ชิดปลายแกนหลัก (ด้านขวาในทิศทาง row)

<div class="header">
    <button>Sign In</button>
    <button>Sign Up</button>
  </div>

justify-content: space-between

กระจายรายการโดยเว้นระยะห่าง ระหว่างรายการเท่ากัน รายการแรกอยู่ที่จุดเริ่มต้น รายการสุดท้ายอยู่ที่จุดปลาย — ไม่มีช่องว่างที่ขอบ

<nav class="nav">
    <div class="logo">Logo</div>
    <div class="links">
      <a href="#">Home</a>
      <a href="#">About</a>
    </div>
  </nav>

justify-content: space-around

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

justify-content: space-evenly

ช่องว่างทั้งหมด (รวมถึงที่ขอบ) มีขนาดเท่ากัน ต่างจาก space-around ตรงที่ระยะหุ้มที่ขอบเท่ากับช่องว่างระหว่างรายการ

<div class="toolbar">
    <button>Bold</button>
    <button>Italic</button>
    <button>Underline</button>
  </div>

align-items: stretch (ค่าเริ่มต้น)

stretch (ค่าเริ่มต้น) ทำให้รายการเฟล็กซ์ทั้งหมดบนแกนตัดขวางขยายเต็มขนาดแกนตัดขวางของคอนเทนเนอร์ รายการในคอนเทนเนอร์แบบแถวจึงมีความสูงเท่ากันทั้งหมด

<div class="row">
    <div>Short</div>
    <div>Taller content<br>spanning<br>multiple lines</div>
    <div>Mid</div>
  </div>

align-items: center

จัดรายการให้อยู่กึ่งกลางบนแกนตัดขวาง ในคอนเทนเนอร์แบบแถว รายการจะอยู่กึ่งกลางในแนวตั้ง ซึ่งเป็นวิธีจัดกึ่งกลางแนวตั้งแบบคลาสสิก

<div class="card">
    <span>👤</span>
    <span>Jane Doe</span>
  </div>

align-items: flex-start และ flex-end

flex-start จัดรายการให้ชิดขอบเริ่มต้นของแกนตัดขวาง (ด้านบนในแถว) ส่วน flex-end จัดให้ชิดขอบปลายของแกนตัดขวาง (ด้านล่างในแถว)

<nav class="nav">
    <div>Short</div>
    <div>Taller<br>nav<br>item</div>
  </nav>

align-items: baseline

จัดรายการให้เส้นฐานของข้อความอยู่ในแนวเดียวกัน เหมาะเมื่อรายการมีขนาดตัวอักษรต่างกันแต่ควรดูเหมือนจัดแนวตรงกัน

<nav class="breadcrumb">
    <span style="font-size:12px">Home</span>
    <span style="font-size:24px">Products</span>
    <span style="font-size:16px">Item</span>
  </nav>

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

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

สรุปทบทวน

justify-content กระจายรายการตามแกนหลักด้วยค่าอย่าง flex-start, center และ space-between ส่วน align-items จัดตำแหน่งรายการบนแกนตัดขวางด้วยค่า stretch, center และ flex-start ทั้งสองคุณสมบัติร่วมกันจะควบคุมการจัดแนวทั้งสองแกน

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

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

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

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

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

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

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

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

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