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

Flex Grow Shrink และ Basis

ควบคุมการขยาย การหด และขนาดพื้นฐานของรายการ flex ด้วยรูปแบบย่อของ flex

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

รูปแบบย่อ flex

รูปแบบย่อ flex ของรายการเฟล็กซ์ใช้กำหนดสามค่า ได้แก่ flex-grow, flex-shrink และ flex-basis

<div style="display:flex; gap:8px">
    <div class="item">flex: 1 1 auto</div>
    <div style="width:80px">Fixed 80px</div>
  </div>

flex-basis

flex-basis กำหนดขนาดเริ่มต้นของรายการเฟล็กซ์ก่อนที่จะขยายหรือหดตัว โดยจะแทนที่ความกว้าง (ในทิศทางแบบแถว) ส่วน auto จะใช้ความกว้างหรือขนาดเนื้อหาของรายการ

<div style="display:flex; gap:8px">
    <div class="sidebar">Sidebar (250px basis)</div>
    <div class="main">Main (auto basis)</div>
  </div>

flex-grow

flex-grow กำหนดว่ารายการจะขยายมากน้อยเพียงใดเมื่อเทียบกับรายการข้างเคียงที่มีพื้นที่ว่างเหลืออยู่ ค่า 0 หมายถึงไม่ขยาย ค่าที่สูงกว่าจะได้รับพื้นที่เพิ่มตามสัดส่วนมากขึ้น

<div style="display:flex; gap:8px">
    <div class="main">Main (grow:2)</div>
    <div class="aside">Aside (grow:1)</div>
    <div class="fixed">Fixed (grow:0)</div>
  </div>

ตัวอย่าง flex-grow

หากคอนเทนเนอร์มีพื้นที่ว่าง 300px และมีรายการสองรายการที่มีค่า flex-grow เป็น 1 และ 2 รายการแรกจะได้พื้นที่เพิ่ม 100px ส่วนรายการที่สองจะได้พื้นที่เพิ่ม 200px (อัตราส่วน 1:2)

flex-shrink

flex-shrink ควบคุมว่ารายการจะหดตัวมากน้อยเพียงใดเมื่อมีพื้นที่ไม่เพียงพอ ค่าเริ่มต้นคือ 1 (รายการทั้งหมดจะหดเท่ากัน) ค่า 0 จะป้องกันการหดตัว

<div style="display:flex; gap:8px">
    <div class="logo">Logo</div>
    <div class="search">Search input takes remaining space</div>
  </div>

ค่ารูปแบบย่อ flex ที่ใช้บ่อย

โปรดจดจำรูปแบบที่ใช้บ่อยเหล่านี้:

  • flex: 1 = ขยายและหดเท่ากัน โดยมีขนาดตั้งต้น 0%
  • flex: auto = flex: 1 1 auto
  • flex: none = flex: 0 0 auto (ไม่ยืดหยุ่น)
  • flex: 0 0 200px = ขนาดคงที่ 200px ไม่ขยายหรือหด

flex: 1 — การกระจายเท่า ๆ กัน

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

<div class="equal-columns" style="display:flex; gap:8px">
    <div class="col">Column A</div>
    <div class="col">Column B</div>
    <div class="col">Column C</div>
  </div>

flex-basis เทียบกับ width

flex-basis จะมีลำดับความสำคัญเหนือ width ในทิศทางของแกนหลัก หากกำหนดทั้งสองค่า flex-basis จะมีผลก่อน (เว้นแต่ flex-basis จะเป็น auto ซึ่งจะส่งต่อการกำหนดไปยัง width)

การกำหนดขนาดโดยธรรมชาติเทียบกับจากภายนอก

เมื่อ flex-basis: 0 (เช่นเดียวกับ flex: 1) รายการจะเริ่มจาก 0 แล้วขยายตามสัดส่วน ซึ่งเป็นการกระจายตามสัดส่วนอย่างแท้จริง แต่เมื่อใช้ flex-basis: auto รายการจะเริ่มจากขนาดเนื้อหาตามธรรมชาติ แล้วจึงขยาย

รูปแบบสามส่วนหลัก

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

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

min-width และ max-width ร่วมกับ flex

ใช้ min-width และ max-width ร่วมกับ flex-grow เพื่อควบคุมขีดจำกัดการขยาย:

<div style="display:flex; gap:8px">
    <div class="card">Responsive Card</div>
  </div>

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

รายการหนึ่งมีค่า flex: 0 0 200px ค่านี้หมายความว่าอย่างไร

สรุปทบทวน

flex-grow กระจายพื้นที่เพิ่มเติมตามสัดส่วน flex-shrink ควบคุมการบีบตัวของรายการ flex-basis กำหนดขนาดเริ่มต้น รูปแบบย่อ flex: 1 เปิดใช้การกระจายพื้นที่เท่า ๆ กัน ใช้ flex: 0 0 Xpx สำหรับรายการขนาดคงที่ และใช้ flex: 1 สำหรับรายการที่ยืดหยุ่นภายในคอนเทนเนอร์เดียวกัน

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

บทเรียน “Flex Grow Shrink และ Basis” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “Flex Grow Shrink และ Basis”

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

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

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

บทเรียน “Flex Grow Shrink และ Basis” ใช้เวลานานแค่ไหน

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