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

ความกว้างแบบลื่นไหลด้วยเปอร์เซ็นต์

ใช้ความกว้างที่อิงเปอร์เซ็นต์เพื่อสร้างการจัดวางที่ปรับขนาดตามพื้นที่บรรจุ

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

เหตุใดจึงใช้ความกว้างแบบยืดหยุ่น

เค้าโครงที่มีความกว้างคงที่ (เป็นพิกเซล) จะใช้งานไม่ได้บนหน้าจอที่แคบกว่าขนาดคงที่ ส่วน ความกว้างแบบยืดหยุ่นที่ใช้เปอร์เซ็นต์จะทำให้เค้าโครงปรับขนาดตามสัดส่วนให้เข้ากับคอนเทนเนอร์หรือวิวพอร์ตทุกขนาด

พื้นฐานความกว้างแบบเปอร์เซ็นต์

ความกว้างแบบเปอร์เซ็นต์จะสัมพันธ์กับ ความกว้างของคอนเทนเนอร์แม่ องค์ประกอบลูกที่มี width: 50% จะมีความกว้างเป็นครึ่งหนึ่งขององค์ประกอบแม่เสมอ

<div style="width:300px;border:1px dashed #999;padding:4px;">
  <div class="half-width" style="background:#4f8cff22;border:1px solid #4f8cff;">width: 50%</div>
  <div class="third-width" style="background:#ffb84d22;border:1px solid #ffb84d;">width: 33.333%</div>
</div>

เปอร์เซ็นต์กับการกำหนดขนาดกล่อง

เมื่อใช้ box-sizing: border-box ความกว้างแบบเปอร์เซ็นต์จะรวม padding และ border ด้วย ทำให้การสร้างคอลัมน์ด้วยเปอร์เซ็นต์ทำได้ง่าย โดย 50% จะเป็นครึ่งหนึ่งจริง ๆ ไม่ว่า padding จะมีขนาดเท่าใด

<div style="width:300px;border:1px dashed #999;">
  <div class="col-half" style="background:#4f8cff22;border:1px solid #4f8cff;">50% including padding/border</div>
</div>

เค้าโครงสองคอลัมน์แบบยืดหยุ่น

เค้าโครงแบบยืดหยุ่นอย่างง่ายที่ใช้ float (แบบเดิม):

<div style="width:100%;overflow:auto;">
  <div class="col" style="background:#4f8cff22;border:1px solid #4f8cff;">Column A</div>
  <div class="col" style="background:#ffb84d22;border:1px solid #ffb84d;">Column B</div>
</div>

คอลัมน์แบบยืดหยุ่นด้วย Flexbox

การใช้ Flexbox สำหรับเค้าโครงคอลัมน์แบบยืดหยุ่นทำได้สะอาดกว่า:

<div class="flex-row">
  <div class="col-main" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Main (flex: 2)</div>
  <div class="col-side" style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Side (flex: 1)</div>
</div>

Padding แบบเปอร์เซ็นต์

Padding แบบเปอร์เซ็นต์จะสัมพันธ์กับ ความกว้างขององค์ประกอบแม่ เสมอ (ไม่ใช่ความสูง) แม้จะเป็น padding ด้านบนหรือด้านล่างก็ตาม วิธีนี้ช่วยให้ใช้เทคนิคสร้างอัตราส่วนภาพได้:

<div class="video-wrapper" style="background:linear-gradient(135deg,#4f8cff,#7ee787);"></div>

อัตราส่วนภาพแบบสมัยใหม่

พร็อพเพอร์ตี aspect-ratio ใช้แทนเทคนิค padding สำหรับรักษาอัตราส่วนภาพได้:

<div class="video-wrapper" style="background:linear-gradient(135deg,#4f8cff,#7ee787);"></div>

max-width กับเค้าโครงแบบยืดหยุ่น

การใช้ความกว้างแบบเปอร์เซ็นต์ร่วมกับ max-width จะป้องกันไม่ให้บรรทัดกว้างเกินไปบนหน้าจอขนาดใหญ่:

<article class="article" style="background:#4f8cff11;border:1px solid #4f8cff;padding:8px;">Article column — 90% wide, capped at 800px, centered</article>

ข้อควรระวังเกี่ยวกับความสูงแบบเปอร์เซ็นต์

ความสูงแบบเปอร์เซ็นต์ต้องให้องค์ประกอบแม่มีความสูงที่กำหนดไว้ หากองค์ประกอบแม่มี height: auto ความสูงแบบเปอร์เซ็นต์ขององค์ประกอบลูกก็จะคำนวณเป็น auto เช่นกัน

คีย์เวิร์ดการกำหนดขนาดตามเนื้อหา

CSS สมัยใหม่มีตัวเลือกการกำหนดขนาดที่ยืดหยุ่นมากขึ้น:

  • min-content: ขนาดเล็กที่สุดที่พอดีกับเนื้อหา
  • max-content: ขนาดที่พอดีกับเนื้อหาทั้งหมดในบรรทัดเดียว
  • fit-content: ขนาดที่อยู่ระหว่าง min-content และ max-content
<span class="tag" style="background:#4f8cff22;border:1px solid #4f8cff;display:inline-block;">Tag</span>

รูปแบบกริดที่ปรับขนาดได้

ตัวอย่างกริดที่ปรับขนาดได้ซึ่งใช้ inline-block (แบบเดิม) หรือ CSS สมัยใหม่:

<div class="grid">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;min-height:60px;">A</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;min-height:60px;">B</div>
  <div style="background:#7ee78722;border:1px solid #34c759;min-height:60px;">C</div>
</div>

ตรวจสอบความเข้าใจอย่างรวดเร็ว

องค์ประกอบแม่มีความกว้าง 600px องค์ประกอบลูกมี width: 60% และ padding: 20px (box-sizing: border-box) ความกว้างของเนื้อหาภายในองค์ประกอบลูกเป็นเท่าใด

สรุปทบทวน

ความกว้างแบบเปอร์เซ็นต์ช่วยสร้างเลย์เอาต์ที่ปรับขนาดตามคอนเทนเนอร์แม่ได้ ใช้ร่วมกับ max-width เพื่อป้องกันไม่ให้เนื้อหากว้างเกินไป ใช้ aspect-ratio สำหรับสื่อที่ปรับตามหน้าจอ Flexbox และ Grid จัดการคอลัมน์ที่ปรับขนาดได้อย่างเหมาะสมกว่าการใช้โฟลตที่กำหนดความกว้างเป็นเปอร์เซ็นต์

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

บทเรียน “ความกว้างแบบลื่นไหลด้วยเปอร์เซ็นต์” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “ความกว้างแบบลื่นไหลด้วยเปอร์เซ็นต์”

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

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

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

บทเรียน “ความกว้างแบบลื่นไหลด้วยเปอร์เซ็นต์” ใช้เวลานานแค่ไหน

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

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

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

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

  1. แนวทาง Mobile-First เทียบกับ Desktop-First
  2. ความกว้างแบบลื่นไหลด้วยเปอร์เซ็นต์
  3. รูปแบบ Min-Width และ Max-Width
  4. รูปภาพแบบตอบสนองและองค์ประกอบ Picture
← กลับไปที่ CSS Academy