เลย์เอาต์ Flexbox ทั่วไป: แถบนำทาง การ์ด ออบเจ็กต์สื่อ

เหตุใดรูปแบบเฟล็กซ์บ็อกซ์จึงสำคัญ

รูปแบบแถบนำทาง

<nav class="navbar">
  <span class="logo">Brand</span>
  <div class="nav-links">
    <a href="#">Home</a>
    <a href="#">About</a>
  </div>
</nav>

ส่วนฮีโร่จัดกึ่งกลาง

<div class="hero">
  <h1>Welcome</h1>
</div>

กริดการ์ด

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

รูปแบบสื่อ

<div class="media">
  <img class="media-img" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" alt="avatar" />
  <div class="media-body">
    <strong>Jane Doe</strong>
    <p>Comment text goes here.</p>
  </div>
</div>

ส่วนท้ายติดด้านล่างด้วยเฟล็กซ์

<main>Main content that grows to fill available space</main>
<footer>Footer</footer>

ปุ่มไอคอนและข้อความ

<button class="btn">
  <svg width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="8" fill="currentColor"/></svg>
  Download
</button>

เลย์เอาต์โฮลีเกรลด้วยเฟล็กซ์บ็อกซ์

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

แถวแบบฟอร์มพร้อมป้ายกำกับ

<div class="form-row">
  <label>Email</label>
  <input type="email" />
</div>

แกลเลอรีภาพขนาดย่อ

<div class="gallery">
  <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" alt="thumb" />
  <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23667eea'/><circle cx='150' cy='150' r='100' fill='%23764ba2'/></svg>" alt="thumb" />
  <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ffd700'/><circle cx='150' cy='150' r='100' fill='%23ff6347'/></svg>" alt="thumb" />
</div>

รายการชิป/ป้ายกำกับ

<div class="tags">
  <span class="tag">CSS</span>
  <span class="tag">Flexbox</span>
  <span class="tag">Layout</span>
</div>

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

สรุปทบทวน