تخطيطات Flexbox الشائعة: شريط التنقل والبطاقات والكائن الإعلامي

أهمية أنماط Flexbox

نمط شريط التنقل

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

قسم Hero في المنتصف

<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>

تذييل ثابت في الأسفل باستخدام Flex

<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>

تخطيط الكأس المقدسة باستخدام Flexbox

<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>

اختبار سريع

مراجعة