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

รูปแบบการเขียนแบบย่อของ Flex

เชี่ยวชาญการเขียนแบบย่อของ flex และทำความเข้าใจค่าที่พบบ่อย เช่น flex: 1, flex: none และ flex: auto

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

ทบทวนรูปแบบย่อของ flex

รูปแบบย่อ flex ตั้งค่า flex-grow, flex-shrink และ flex-basis ได้ในคำประกาศเดียว การทำความเข้าใจรูปแบบย่อแต่ละแบบเป็นสิ่งสำคัญสำหรับเลย์เอาต์ที่ใช้งานจริง

flex: 1

flex: 1 เทียบเท่ากับ flex: 1 1 0% รายการจะเริ่มจากขนาดพื้นฐานเป็นศูนย์และขยายเท่ากันเพื่อเติมพื้นที่ว่างที่มีอยู่ นี่คือรูปแบบย่อที่ใช้บ่อยที่สุดสำหรับคอลัมน์ที่มีขนาดเท่ากัน

<div class="equal-cols">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

flex: auto

flex: auto = flex: 1 1 auto รายการจะเริ่มจากขนาดตามเนื้อหาตามธรรมชาติ แล้วจึงขยายหรือหดตามสัดส่วน เนื้อหาที่กว้างกว่าจะได้พื้นที่มากกว่าเมื่อขยาย

<div class="nav-links">
  <a href="#">Home</a>
  <a href="#">About Us</a>
  <a href="#">Contact</a>
</div>

flex: none

flex: none = flex: 0 0 auto รายการจะมีขนาดตายตัว ไม่ขยายหรือหด ขนาดจะถูกกำหนดจากความกว้างตามเนื้อหาตามธรรมชาติ หรือจากความกว้าง/ความสูงที่ระบุไว้

<div class="row">
  <div class="logo">Logo</div>
  <div>Flexible content</div>
</div>

flex: 0 0 Xpx

รายการที่มีขนาดคงที่และไม่ยืดหยุ่น นี่เป็นวิธีที่ระบุได้ชัดเจนที่สุดในการสร้างแผงแถบด้านข้างที่มีความกว้างแน่นอน:

<div class="layout">
  <div class="sidebar-left">Left</div>
  <div class="main-content">Main</div>
  <div class="sidebar-right">Right</div>
</div>

flex: 1 เทียบกับ flex: 1 1 auto

ความแตกต่างสำคัญคือ เมื่อใช้ flex: 1 (ขนาดพื้นฐาน 0%) รายการทั้งหมดจะเริ่มจาก 0 แล้วขยายตามสัดส่วน แต่เมื่อใช้ flex: 1 1 auto รายการจะเริ่มจากขนาดตามเนื้อหาตามธรรมชาติแล้วจึงขยาย ความแตกต่างนี้ส่งผลต่อการแบ่งพื้นที่ที่เหลือ

อัตราส่วน flex: 2

ใช้ค่า flex-grow ที่ไม่เท่ากันเพื่อแบ่งพื้นที่ตามสัดส่วน:

<div class="split">
  <div class="main">Main (2/3)</div>
  <div class="side">Side (1/3)</div>
</div>

การผสานขนาดคงที่และยืดหยุ่น

รูปแบบที่ใช้บ่อยที่สุดในงานจริงคือ แถบด้านข้างขนาดคงที่และเนื้อหาหลักที่ยืดหยุ่น:

<div class="layout">
  <div class="sidebar">Sidebar 280px</div>
  <div class="content">Flexible content</div>
</div>

เทคนิคเฟล็กซ์ด้วย min-width: 0

รายการเฟล็กซ์มีค่าเริ่มต้นเป็น min-width: auto ซึ่งอาจป้องกันไม่ให้รายการหดเล็กกว่าขนาดเนื้อหา ให้ตั้งค่า min-width: 0 ให้กับรายการที่ควรหดได้อย่างอิสระ เช่น ตัวบรรจุข้อความที่มีการตัดข้อความ

<div class="row">
  <div class="text-col">This is a very long line of text that needs to truncate with an ellipsis inside a flex item.</div>
</div>

รูปแบบกริดการ์ด

กริดการ์ดแบบตอบสนองที่มีความยืดหยุ่นแต่จำกัดขอบเขต:

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

การแก้จุดบกพร่องของรูปแบบย่อ flex

ใช้ DevTools ของเบราว์เซอร์เพื่อตรวจสอบค่าที่คำนวณแล้วของ flex-grow, flex-shrink และ flex-basis แผงตรวจสอบ Flexbox ยังแสดงพื้นที่ว่างและขนาดรายการในรูปแบบภาพด้วย

ตรวจสอบอย่างรวดเร็ว

flex: auto ขยายเป็นค่าใด

สรุปทบทวน

จดจำรูปแบบย่อของ flex ที่สำคัญ ได้แก่ flex: 1 (คอลัมน์เท่ากันโดยเริ่มจากศูนย์), flex: auto (ขยายจากขนาดตามธรรมชาติ), flex: none (ขนาดตายตัว), flex: 0 0 Xpx (ขนาดคงที่) ใช้ min-width: 0 กับองค์ประกอบลูกของ flex ที่มีข้อความซึ่งต้องตัดข้อความ ผสานรายการแบบคงที่และยืดหยุ่นเพื่อสร้างเลย์เอาต์แถบด้านข้างแบบคลาสสิก

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

บทเรียน “รูปแบบการเขียนแบบย่อของ Flex” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “รูปแบบการเขียนแบบย่อของ Flex”

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

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

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

บทเรียน “รูปแบบการเขียนแบบย่อของ Flex” ใช้เวลานานแค่ไหน

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

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

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

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

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