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

การเขียนทับการจัดแนวรายการ Flex ด้วย align-self

เขียนทับ align-items ของคอนเทนเนอร์สำหรับรายการ flex แต่ละรายการด้วย align-self

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

align-self คืออะไร

align-self จะแทนที่การตั้งค่า align-items ของคอนเทนเนอร์เฟล็กซ์สำหรับรายการเฟล็กซ์รายการใดรายการหนึ่ง โดยใช้กับรายการแต่ละรายการ ไม่ใช่คอนเทนเนอร์

ค่าของ align-self

รองรับค่าเดียวกับ align-items:

  • auto — รับค่าของ align-items จากคอนเทนเนอร์ (ค่าเริ่มต้น)
  • flex-start — จัดแนวไปยังจุดเริ่มต้นของแกนขวาง
  • flex-end — จัดแนวไปยังจุดสิ้นสุดของแกนขวาง
  • center — จัดให้อยู่กึ่งกลางแกนขวาง
  • stretch — ยืดให้เต็มขนาดของแกนขวาง
  • baseline — จัดแนวตามเส้นฐานของข้อความ

ตัวอย่างที่ใช้ได้จริง

แถบนำทางที่รายการส่วนใหญ่อยู่กึ่งกลาง แต่ปุ่มสุดท้ายจัดแนวไปยังจุดสิ้นสุด:

<nav class="nav">
  <span>Logo</span>
  <a href="#">Link</a>
  <button class="cta-button">Sign Up</button>
</nav>

ยืดรายการหนึ่งรายการ

ทำให้การ์ดหนึ่งใบยืดเต็มความสูง ขณะที่การ์ดอื่นปรับขนาดพอดีกับเนื้อหา:

<div class="sidebar-layout">
  <div>Content</div>
  <div class="ad-unit">Ad</div>
</div>

margin: auto ในฐานะการจัดแนว

ระยะขอบอัตโนมัติของรายการเฟล็กซ์จะผลักตัวรายการเองหรือรายการข้างเคียงไปยังฝั่งตรงข้าม นี่เป็นทางเลือกที่มีประสิทธิภาพแทน align-self สำหรับการจัดกึ่งกลางหรือกระจายพื้นที่

<nav class="nav">
  <span class="logo">Logo</span>
  <a href="#">Home</a>
  <a href="#">About</a>
  <span class="settings">&#9881;</span>
</nav>

margin: auto สำหรับการจัดกึ่งกลางแนวตั้ง

ระยะขอบอัตโนมัติทำงานในแนวตั้งได้เช่นกัน margin-top: auto ภายในคอนเทนเนอร์เฟล็กซ์แบบคอลัมน์จะผลักองค์ประกอบไปด้านล่าง:

<div class="card">
  <p>Card body</p>
  <div class="card-footer">Footer</div>
</div>

การจัดแนวตามเส้นฐาน

การจัดแนวรายการตามเส้นฐานของข้อความช่วยรักษาความสัมพันธ์ที่อ่านง่ายระหว่างรายการที่มีขนาดต่างกัน:

<div class="stats-row">
  <span class="big-number">42</span>
  <span class="label">users</span>
</div>

align-self: auto (ค่าเริ่มต้น)

align-self: auto บอกให้รายการใช้ค่าของ align-items จากคอนเทนเนอร์ คุณจำเป็นต้องกำหนด align-self เฉพาะเมื่อต้องการให้รายการ แตกต่าง จากค่าเริ่มต้นของคอนเทนเนอร์

แกนขวางเทียบกับแกนหลัก

โปรดจำไว้ว่า align-self ทำงานบนแกนขวางเสมอ หาก flex-direction: column แกนขวางจะเป็นแนวนอน ดังนั้น align-self จึงควบคุมตำแหน่งซ้ายและขวา

การรวม align-self กับ flex-grow

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

<div class="features">
  <div class="feature-card">Feature A</div>
  <div>Feature B</div>
</div>

การจัดแนวของกริดเทียบกับเฟล็กซ์บ็อกซ์

CSS มีทั้ง align-self (แกนแถว) และ justify-self (แกนคอลัมน์) สำหรับการควบคุม 2 มิติ ส่วน align-self ของเฟล็กซ์บ็อกซ์ควบคุมเฉพาะแกนขวางเท่านั้น ให้ใช้ margin: auto สำหรับแกนหลัก

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

คอนเทนเนอร์เฟล็กซ์มี align-items: center แต่รายการหนึ่งต้องจัดแนวไปด้านบนของแกนขวาง ควรกำหนดคุณสมบัติใดให้กับรายการนั้น

สรุป

align-self จะแทนที่ align-items ของคอนเทนเนอร์เฟล็กซ์สำหรับรายการแต่ละรายการ ใช้เพื่อทำให้การจัดแนวขององค์ประกอบบางรายการแตกต่างจากรูปแบบหลัก margin: auto เป็นเครื่องมือเสริมที่กระจายพื้นที่ที่เหลือ เพื่อผลักรายการไปตามแกนใดแกนหนึ่ง

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

บทเรียน “การเขียนทับการจัดแนวรายการ Flex ด้วย align-self” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การเขียนทับการจัดแนวรายการ Flex ด้วย align-self”

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

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

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

บทเรียน “การเขียนทับการจัดแนวรายการ Flex ด้วย align-self” ใช้เวลานานแค่ไหน

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

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

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

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

  1. การเขียนทับการจัดแนวรายการ Flex ด้วย align-self
  2. คุณสมบัติ order และการจัดลำดับภาพใหม่
  3. รูปแบบการเขียนแบบย่อของ Flex
  4. เลย์เอาต์ Flexbox ทั่วไป: แถบนำทาง การ์ด ออบเจ็กต์สื่อ
← กลับไปที่ CSS Academy