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

พื้นฐาน display: block inline flex grid

สลับค่าของ display และดูว่า block, inline, flex กับ grid จัดเรียงเนื้อหาแตกต่างกันอย่างไร

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

คุณสมบัติ display

คุณสมบัติ display เป็นคุณสมบัติ CSS ที่สำคัญที่สุดสำหรับการจัดวาง คุณสมบัตินี้ควบคุมว่าองค์ประกอบจะเข้าร่วมในลำดับการจัดวางอย่างไร และองค์ประกอบลูกจะถูกจัดเรียงอย่างไร ค่าที่ใช้บ่อยที่สุด ได้แก่ block, inline, inline-block, flex, grid และ none

display: block

องค์ประกอบแบบบล็อกจะใช้ความกว้างเต็มขององค์ประกอบบรรจุและเริ่มต้นในบรรทัดใหม่ ตัวอย่างเช่น <div>, <p> และ <h1> คุณสามารถกำหนดความกว้าง ความสูง ระยะขอบ และพื้นที่ด้านในให้กับองค์ประกอบแบบบล็อกได้

.card {
  display: block;
  width: 100%;
  margin-bottom: 24px;
}

display: inline

องค์ประกอบแบบอินไลน์จะไหลไปกับข้อความ โดยไม่เริ่มต้นในบรรทัดใหม่ ตัวอย่างเช่น <span>, <a> และ <strong> ความกว้าง ความสูง และระยะขอบแนวตั้งจะไม่มีผลกับองค์ประกอบแบบอินไลน์

span { display: inline; color: blue; }
/* Setting width: 200px on a span does nothing */

display: inline-block

inline-block ผสานคุณสมบัติของทั้งสองแบบเข้าด้วยกัน องค์ประกอบจะไหลไปในบรรทัดเดียวเหมือนข้อความ แต่รับค่าความกว้าง ความสูง และระยะขอบแนวตั้งได้เหมือนบล็อก เหมาะสำหรับปุ่มและป้ายที่ควรอยู่ในบรรทัดข้อความเดียวกัน

.badge {
  display: inline-block;
  padding: 4px 8px;
  background: #e2e8f0;
  border-radius: 4px;
  font-size: 0.75rem;
}

display: none

display: none จะนำองค์ประกอบออกจากการจัดวางโดยสมบูรณ์ ทำให้ไม่ใช้พื้นที่ใด ๆ หากต้องการซ่อนองค์ประกอบโดยยังคงพื้นที่เดิมไว้ ให้ใช้ visibility: hidden

Flexbox — การจัดวางแบบมิติเดียว

display: flex จะเปลี่ยนองค์ประกอบให้เป็น ตัวบรรจุแบบยืดหยุ่น องค์ประกอบลูกโดยตรงจะกลายเป็น รายการแบบยืดหยุ่น ซึ่งจัดเรียงตามแถว (ค่าเริ่มต้น) หรือคอลัมน์ Flexbox เหมาะอย่างยิ่งสำหรับการกระจายพื้นที่และการจัดแนวรายการ

.nav {
  display: flex;
  justify-content: space-between; /* horizontal */
  align-items: center;            /* vertical */
  gap: 16px;
}

คุณสมบัติสำคัญของ Flexbox

flex-direction: row | column justify-content: space-between | center | flex-end align-items: center | flex-start | flex-end | stretch gap: ระยะห่างระหว่างรายการโดยไม่ต้องใช้ margin

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

CSS Grid — การจัดวางแบบสองมิติ

display: grid จะเปลี่ยนองค์ประกอบให้เป็น ตัวบรรจุแบบกริด คุณกำหนดแถวและคอลัมน์ด้วย grid-template-columns และ grid-template-rows Grid เหมาะสำหรับโครงร่างหน้าเว็บและกริดการ์ด

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

หน่วย fr

หน่วย fr (ส่วนแบ่ง) ใช้กระจายพื้นที่ที่มีอยู่ grid-template-columns: 1fr 2fr 1fr จะสร้างสามคอลัมน์ โดยคอลัมน์ตรงกลางมีพื้นที่เป็นสองเท่าของคอลัมน์อื่น

.layout {
  display: grid;
  grid-template-columns: 240px 1fr; /* sidebar + main */
  gap: 32px;
}

การเลือกระหว่าง Flex และ Grid

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

display: none เทียบกับ visibility: hidden

display: none: นำออกจากการจัดวางและไม่สามารถเข้าถึงได้ด้วยโปรแกรมอ่านหน้าจอ visibility: hidden: มองไม่เห็นแต่ยังคงใช้พื้นที่ และยังอยู่ในโครงสร้างการเข้าถึง opacity: 0: มองไม่เห็นแต่ยังใช้พื้นที่และยังเข้าถึงได้

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

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

สรุป: ค่าของ display

block ใช้ความกว้างเต็ม inline ไหลไปกับข้อความ inline-block ผสานคุณสมบัติของทั้งสองแบบ flex จัดองค์ประกอบลูกในมิติเดียว grid จัดองค์ประกอบลูกในสองมิติ none นำองค์ประกอบออกจากการจัดวาง เมื่อเข้าใจสิ่งเหล่านี้แล้ว คุณจะควบคุมการจัดวางทุกแบบบนเว็บได้

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

บทเรียน “พื้นฐาน display: block inline flex grid” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “พื้นฐาน display: block inline flex grid”

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

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

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

บทเรียน “พื้นฐาน display: block inline flex grid” ใช้เวลานานแค่ไหน

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

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

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

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

  1. ตัวเลือกและการเรียงซ้อน
  2. สี ตัวอักษร และโมเดลกล่อง
  3. พื้นฐาน display: block inline flex grid
  4. การกำหนดตำแหน่ง: relative absolute fixed sticky
← กลับไปที่ Frontend Academy