English 中文 العربية 日本語 Português

Bootstrap: أصناف أدوات Flexbox

آخر تحديث: 2026-08-26

1. مقدمة الدرس

(1) المتطلبات المسبقة

(2) 🎯 ما ستتعلمه

(3) المشكلة

يريد بوب إنشاء شريط تنقل: شعار على اليسار وروابط تنقل في المنتصف وزر تسجيل دخول على اليمين — التخطيطات التقليدية تتطلب float أو position، وهي مرهقة وعرضة للأخطاء.

(4) الحل

يُغلّف Bootstrap خصائص Flexbox الشائعة في أصناف أدوات، مما يتيح لك تنفيذ تخطيطات مرنة دون كتابة سطر CSS واحد. استخدام أصناف أدوات Flexbox في Bootstrap يتطلب فقط d-flex justify-content-between align-items-center.

لفهم الفكرة: Flexbox يشبه عمال ترتيب الصناديق — المحور الرئيسي يحدد الاتجاه (أفقي أو عمودي)، والمحور العرضي يحدد المحاذاة (وسط/أعلى/أسفل)، و justify-content يدير التوزيع الأفقي، و align-items يدير المحاذاة العمودية.

(5) الفائدة

بعد استخدام أصناف أدوات Flexbox، أنجز بوب تخطيط شريط التنقل بأصناف قليلة وموجزة فقط — شعار يسار، روابط وسط، زر يمين — الكود واضح وسهل الصيانة.

2. تفعيل حاوية Flex

جميع أصناف أدوات Flex مبنية على d-flex أو d-inline-flex:

▶ مثال: أساسيات حاوية Flex

HTML 
<div class="d-flex bg-light p-2">d-flex - block level flex container</div>
<span class="d-inline-flex bg-info p-2 text-white">d-inline-flex - inline flex</span>
▶ جرّب الكود

النتيجة: تأثيرات المكوّنات بأنماط Bootstrap 5.3 المطبقة (مثل الأزرار، البطاقات، عرض الشرائح، الطي، إلخ). تستخدم الصفحة السمة الافتراضية لـ Bootstrap (فاتح) ونظام الشبكة المتجاوب افتراضيًا.

الصنف التأثير مكافئ CSS
d-flex حاوية flex على مستوى الكتلة display: flex
d-inline-flex حاوية flex مضمّنة display: inline-flex

هذان الصنفان يدعمان أيضًا نقاط توقف متجاوبة: d-sm-flex، d-md-flex، إلخ.

3. اتجاه المحور الرئيسي

flex-row (افتراضي) من اليسار إلى اليمين، flex-row-reverse من اليمين إلى اليسار، flex-column من الأعلى إلى الأسفل.

HTML 
<div class="d-flex flex-row bg-light p-2 mb-2">
  <div class="p-2 bg-primary text-white">Item 1</div>
  <div class="p-2 bg-success text-white">Item 2</div>
  <div class="p-2 bg-danger text-white">Item 3</div>
</div>

<div class="d-flex flex-column bg-light p-2">
  <div class="p-2 bg-primary text-white">Item 1</div>
  <div class="p-2 bg-success text-white">Item 2</div>
  <div class="p-2 bg-danger text-white">Item 3</div>
</div>
▶ جرّب الكود

النتيجة: تأثيرات المكوّنات بأنماط Bootstrap 5.3 المطبقة (مثل الأزرار، البطاقات، عرض الشرائح، الطي، إلخ). تستخدم الصفحة السمة الافتراضية لـ Bootstrap (فاتح) ونظام الشبكة المتجاوب افتراضيًا.

الصنف الاتجاه السيناريو
flex-row أفقي (افتراضي) روابط التنقل، مجموعات الأزرار
flex-row-reverse أفقي معكوس قوائم يمين
flex-column عمودي قوائم عمودية للجوال
flex-column-reverse عمودي معكوس أقسام التعليقات (الأحدث في الأعلى)

4. محاذاة المحور الرئيسي: justify-content

HTML 
<div class="d-flex justify-content-start bg-light p-2 mb-2">
  <div class="p-2 bg-primary text-white">Start</div>
  <div class="p-2 bg-primary text-white">Start</div>
</div>
<div class="d-flex justify-content-center bg-light p-2 mb-2">
  <div class="p-2 bg-success text-white">Center</div>
  <div class="p-2 bg-success text-white">Center</div>
</div>
<div class="d-flex justify-content-end bg-light p-2 mb-2">
  <div class="p-2 bg-danger text-white">End</div>
  <div class="p-2 bg-danger text-white">End</div>
</div>
<div class="d-flex justify-content-between bg-light p-2 mb-2">
  <div class="p-2 bg-info text-white">Between</div>
  <div class="p-2 bg-info text-white">Between</div>
</div>
<div class="d-flex justify-content-around bg-light p-2">
  <div class="p-2 bg-warning">Around</div>
  <div class="p-2 bg-warning">Around</div>
</div>
▶ جرّب الكود

النتيجة: تأثيرات المكوّنات بأنماط Bootstrap 5.3 المطبقة (مثل الأزرار، البطاقات، عرض الشرائح، الطي، إلخ). تستخدم الصفحة السمة الافتراضية لـ Bootstrap (فاتح) ونظام الشبكة المتجاوب افتراضيًا.

100% 
graph LR
    subgraph justify-content options
        A1[start] --> A2[center]
        A2 --> A3[end]
        A3 --> A4[between]
        A4 --> A5[around]
    end

النتيجة: تأثيرات المكوّنات بأنماط Bootstrap 5.3 المطبقة (مثل الأزرار، البطاقات، عرض الشرائح، الطي، إلخ). تستخدم الصفحة السمة الافتراضية لـ Bootstrap (فاتح) ونظام الشبكة المتجاوب افتراضيًا.

الصنف التأثير
justify-content-start محاذاة لليسار (افتراضي)
justify-content-center توسيط
justify-content-end محاذاة لليمين
justify-content-between مبرر، مسافة متساوية بين العناصر
justify-content-around مسافة متساوية حول العناصر
justify-content-evenly كل المسافات متساوية تمامًا

5. محاذاة المحور العرضي: align-items

HTML 
<div class="d-flex align-items-start bg-light p-2 mb-2" style="height: 80px;">
  <div class="p-2 bg-primary text-white">Start</div>
  <div class="p-2 bg-primary text-white">Start</div>
</div>
<div class="d-flex align-items-center bg-light p-2 mb-2" style="height: 80px;">
  <div class="p-2 bg-success text-white">Center</div>
  <div class="p-2 bg-success text-white">Center</div>
</div>
<div class="d-flex align-items-end bg-light p-2" style="height: 80px;">
  <div class="p-2 bg-danger text-white">End</div>
  <div class="p-2 bg-danger text-white">End</div>
</div>
▶ جرّب الكود

النتيجة: تأثيرات المكوّنات بأنماط Bootstrap 5.3 المطبقة (مثل الأزرار، البطاقات، عرض الشرائح، الطي، إلخ). تستخدم الصفحة السمة الافتراضية لـ Bootstrap (فاتح) ونظام الشبكة المتجاوب افتراضيًا.

الصنف التأثير مكافئ CSS
align-items-start محاذاة علوية align-items: flex-start
align-items-center توسيط عمودي align-items: center
align-items-end محاذاة سفلية align-items: flex-end
align-items-stretch تمدد لملء (افتراضي) align-items: stretch

سيناريو نموذجي: align-items-center هو الحل الأكثر شيوعًا للتوسيط العمودي — اضبط d-flex + align-items-center على الحاوية الأم، وسيتم توسيط المحتوى عموديًا تلقائيًا.

6. محاذاة عنصر مفرد: align-self

HTML 
<div class="d-flex bg-light p-2" style="height: 100px;">
  <div class="p-2 bg-primary text-white align-self-start">Start</div>
  <div class="p-2 bg-success text-white align-self-center">Center</div>
  <div class="p-2 bg-danger text-white align-self-end">End</div>
</div>
▶ جرّب الكود

النتيجة: تأثيرات المكوّنات بأنماط Bootstrap 5.3 المطبقة (مثل الأزرار، البطاقات، عرض الشرائح، الطي، إلخ). تستخدم الصفحة السمة الافتراضية لـ Bootstrap (فاتح) ونظام الشبكة المتجاوب افتراضيًا.

7. الالتفاف: flex-wrap

HTML 
<div class="d-flex flex-wrap bg-light p-2">
  <div class="p-3 m-1 bg-primary text-white">Item 1</div>
  <div class="p-3 m-1 bg-primary text-white">Item 2</div>
  <div class="p-3 m-1 bg-primary text-white">Item 3</div>
  <div class="p-3 m-1 bg-primary text-white">Item 4</div>
  <div class="p-3 m-1 bg-primary text-white">Item 5</div>
  <div class="p-3 m-1 bg-primary text-white">Item 6</div>
</div>
▶ جرّب الكود

النتيجة: تأثيرات المكوّنات بأنماط Bootstrap 5.3 المطبقة (مثل الأزرار، البطاقات، عرض الشرائح، الطي، إلخ). تستخدم الصفحة السمة الافتراضية لـ Bootstrap (فاتح) ونظام الشبكة المتجاوب افتراضيًا.

الصنف السلوك
flex-nowrap لا التفاف، العناصر مضغوطة (افتراضي)
flex-wrap التفاف تلقائي
flex-wrap-reverse التفاف معكوس

8. الترتيب: order

HTML 
<div class="d-flex bg-light p-2">
  <div class="p-3 bg-danger text-white order-3">First in HTML (order-3)</div>
  <div class="p-3 bg-success text-white order-1">Second in HTML (order-1)</div>
  <div class="p-3 bg-primary text-white order-2">Third in HTML (order-2)</div>
</div>
▶ جرّب الكود

النتيجة: تأثيرات المكوّنات بأنماط Bootstrap 5.3 المطبقة (مثل الأزرار، البطاقات، عرض الشرائح، الطي، إلخ). تستخدم الصفحة السمة الافتراضية لـ Bootstrap (فاتح) ونظام الشبكة المتجاوب افتراضيًا. order-0 ~ order-5، الأرقام الأصغر تأتي أولًا. جميع العناصر افتراضيًا order-0.

9. التمدد: flex-grow و flex-fill

HTML 
<div class="d-flex bg-light p-2">
  <div class="p-3 bg-danger text-white">Fixed</div>
  <div class="p-3 bg-success text-white flex-fill">flex-fill</div>
  <div class="p-3 bg-primary text-white flex-fill">flex-fill</div>
</div>
▶ جرّب الكود

النتيجة: تأثيرات المكوّنات بأنماط Bootstrap 5.3 المطبقة (مثل الأزرار، البطاقات، عرض الشرائح، الطي، إلخ). تستخدم الصفحة السمة الافتراضية لـ Bootstrap (فاتح) ونظام الشبكة المتجاوب افتراضيًا.

الصنف التأثير CSS
flex-fill حصة متساوية من المساحة المتبقية flex: 1 1 auto
flex-grow-0 لا تمدد (افتراضي) flex-grow: 0
flex-grow-1 تمدد لملء flex-grow: 1
flex-shrink-0 لا انكماش flex-shrink: 0

10. ورقة مرجعية لأصناف أدوات Flex

(1) مرجع سريع لخصائص Flex

الفئة الصنف مكافئ CSS الوصف
حاوية d-flex display: flex حاوية flex على مستوى الكتلة
حاوية d-inline-flex display: inline-flex حاوية flex مضمّنة
اتجاه flex-row flex-direction: row تخطيط أفقي (افتراضي)
اتجاه flex-column flex-direction: column تخطيط عمودي
اتجاه flex-row-reverse flex-direction: row-reverse أفقي معكوس
اتجاه flex-column-reverse flex-direction: column-reverse عمودي معكوس
المحور الرئيسي justify-content-* justify-content: * محاذاة المحور الرئيسي
المحور العرضي align-items-* align-items: * محاذاة المحور العرضي
عنصر مفرد align-self-* align-self: * محاذاة عنصر واحد
التفاف flex-wrap flex-wrap: wrap التفاف تلقائي
التفاف flex-nowrap flex-wrap: nowrap لا التفاف (افتراضي)
ترتيب order-{0-5} order: {0-5} ضبط ترتيب العرض
تمدد flex-fill flex: 1 1 auto حصة متساوية من المساحة المتبقية
تمدد flex-grow-1 flex-grow: 1 تمدد لملء
تمدد flex-shrink-0 flex-shrink: 0 منع الانكماش

(2) شرح قيم justify-content

الصنف التأثير الرسم التخطيطي حالة الاستخدام
justify-content-start محاذاة لليسار (افتراضي) ████░░░░ محاذاة يسارية قياسية
justify-content-center توسيط ░░████░░ تخطيط متمركز
justify-content-end محاذاة لليمين ░░░░████ شريط إجراءات يميني
justify-content-between مبرر █░░█░░██ شريط التنقل
justify-content-around مسافة متساوية حول ░█░█░█░█░ شريط أدوات أيقونات
justify-content-evenly كل المسافات متساوية ░█░░█░░█░ قائمة موزعة بالتساوي

(3) شرح قيم align-items

الصنف التأثير الرسم التخطيطي حالة الاستخدام
align-items-start محاذاة علوية محاذاة علوية محاذاة الخط الأساسي العلوي
align-items-center توسيط عمودي متمركز الأكثر شيوعًا للتوسيط العمودي
align-items-end محاذاة سفلية محاذاة سفلية شريط إجراءات سفلي
align-items-stretch تمدد لملء ارتفاع متساوٍ أعمدة بطاقات بارتفاعات متساوية
align-items-baseline محاذاة خط الأساس النصي خط أساسي نص بأحجام خطوط مختلفة

▶ مثال: شريط التنقل

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flex Navbar</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <nav class="d-flex justify-content-between align-items-center bg-dark text-white p-3">
    <div class="fw-bold fs-5">MyLogo</div>
    <ul class="d-flex list-unstyled gap-4 mb-0">
      <li><a href="#" class="text-white text-decoration-none">Home</a></li>
      <li><a href="#" class="text-white text-decoration-none">Products</a></li>
      <li><a href="#" class="text-white text-decoration-none">About</a></li>
      <li><a href="#" class="text-white text-decoration-none">Contact</a></li>
    </ul>
    <button class="btn btn-light btn-sm">Login</button>
  </nav>
  <div class="container mt-4">
    <p>Use <code>justify-content-between</code> to achieve logo on the left, navigation centered, and button on the right.</p>
  </div>
</body>
</html>
▶ جرّب الكود

النتيجة: تأثيرات المكوّنات بأنماط Bootstrap 5.3 المطبقة (مثل الأزرار، البطاقات، عرض الشرائح، الطي، إلخ). تستخدم الصفحة السمة الافتراضية لـ Bootstrap (فاتح) ونظام الشبكة المتجاوب افتراضيًا.

▶ مثال: شبكة بطاقات

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Card Grid</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h3 class="mb-4">Flex Card Grid</h3>
    <div class="d-flex flex-column flex-md-row gap-3">
      <div class="card flex-fill">
        <div class="card-body">
          <h5 class="card-title">Card One</h5>
          <p class="card-text">flex-fill makes all cards equal width.</p>
          <a href="#" class="btn btn-primary">View</a>
        </div>
      </div>
      <div class="card flex-fill">
        <div class="card-body">
          <h5 class="card-title">Card Two</h5>
          <p class="card-text">Use gap-3 to control card spacing.</p>
          <a href="#" class="btn btn-success">View</a>
        </div>
      </div>
      <div class="card flex-fill">
        <div class="card-body">
          <h5 class="card-title">Card Three</h5>
          <p class="card-text">flex-column for mobile vertical, flex-md-row for desktop horizontal.</p>
          <a href="#" class="btn btn-outline-primary">View</a>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

النتيجة: تأثيرات المكوّنات بأنماط Bootstrap 5.3 المطبقة (مثل الأزرار، البطاقات، عرض الشرائح، الطي، إلخ). تستخدم الصفحة السمة الافتراضية لـ Bootstrap (فاتح) ونظام الشبكة المتجاوب افتراضيًا.

▶ مثال: نموذج تسجيل دخول متمركز

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Centered Login</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="d-flex justify-content-center align-items-center bg-light" style="min-height: 100vh;">
    <div class="bg-white p-4 rounded shadow" style="width: 100%; max-width: 400px;">
      <h3 class="text-center mb-4">User Login</h3>
      <form>
        <div class="mb-3">
          <label class="form-label">Email</label>
          <input type="email" class="form-control" placeholder="name@example.com">
        </div>
        <div class="mb-3">
          <label class="form-label">Password</label>
          <input type="password" class="form-control" placeholder="Enter your password">
        </div>
        <button type="submit" class="btn btn-primary w-100">Login</button>
      </form>
      <p class="text-center text-muted small mt-3 mb-0">
        Don't have an account? <a href="#">Sign up now</a>
      </p>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

النتيجة: تأثيرات المكوّنات بأنماط Bootstrap 5.3 المطبقة (مثل الأزرار، البطاقات، عرض الشرائح، الطي، إلخ). تستخدم الصفحة السمة الافتراضية لـ Bootstrap (فاتح) ونظام الشبكة المتجاوب افتراضيًا.

▶ مثال: كائن وسائط

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Media Object</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h3 class="mb-4">Flex Media Object</h3>

    <div class="d-flex gap-3 mb-4">
      <div class="bg-primary text-white d-flex justify-content-center align-items-center" style="width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;">
        A
      </div>
      <div>
        <h5 class="mb-1">Alice Wang</h5>
        <p class="mb-0 text-muted small">flex-shrink-0 ensures the avatar is not compressed. Use d-flex + gap-3 for text-image layout, which is the recommended implementation for Bootstrap media objects.</p>
      </div>
    </div>

    <div class="d-flex gap-3">
      <div class="bg-success text-white d-flex justify-content-center align-items-center" style="width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;">
        B
      </div>
      <div>
        <h5 class="mb-1">Bob Chen</h5>
        <p class="mb-0 text-muted small">align-self-center can vertically center the avatar relative to the text, useful when avatar heights vary.</p>
      </div>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

النتيجة: تأثيرات المكوّنات بأنماط Bootstrap 5.3 المطبقة (مثل الأزرار، البطاقات، عرض الشرائح، الطي، إلخ). تستخدم الصفحة السمة الافتراضية لـ Bootstrap (فاتح) ونظام الشبكة المتجاوب افتراضيًا.

❓ أسئلة شائعة

س لماذا لا تكون عناصري في صف واحد عند استخدام d-flex؟
ج يعتمد Flexbox افتراضيًا على flex-direction: row (تخطيط أفقي). تحقق مما إذا كان CSS آخر يتجاوز قيمة display، أو ما إذا كانت العناصر الفرعية عناصر على مستوى الكتلة بـ width: 100%.
س ما الفرق بين justify-content-between و justify-content-around؟
ج between يضع العنصرين الأول والأخيرagainstحواف الحاوية، مع مسافة متساوية موزعة بينهما. around يخصص مسافة متساوية على يسار ويمين كل عنصر، مما يجعل الفجوات الطرفية نصف الفجوات الوسطى. يمكنك تعديل الأصناف في DevTools للمقارنة في الوقت الفعلي.
س هل يجب استخدام Flexbox للتوسيط العمودي؟
ج للحاويات ذات الارتفاع المعروف، يمكنك أيضًا استخدام line-height أو position + transform. ومع ذلك، فإن d-flex align-items-center في Flexbox هو الطريقة الأكثر إيجازًا وشمولية — لا تعتمد على ارتفاع الحاوية ولها أفضل توافق مع نقاط التوقف المتجاوبة.
س متى أستخدم Flexbox ومتى أستخدم Grid؟
ج Flexbox مناسب للتخطيطات أحادية البعد (صف أو عمود)، مثل أشرطة التنقل ومجموعات الأزرار وكائنات الوسائط. Grid مناسب للتخطيطات ثنائية الأبعاد (صفوف وأعمدة في وقت واحد)، مثل التخطيطات الرئيسية للصفحة وشبكات البطاقات. قاعدة بسيطة: استخدم Flexbox لصف أو عمود واحد، استخدم Grid عند التحكم في الصفوف والأعمدة في وقت واحد. كلاهما يمكن تداخله.
س ما الفرق بين align-content و align-items؟
ج align-items يتحكم في محاذاة العناصر داخل سطر واحد، بينما align-content يتحكم في توزيع أسطر متعددة على المحور العرضي. align-content يسري فقط عندما يكون flex-wrap: wrap مفعلًا وهناك أسطر متعددة. يوفر Bootstrap سلسلة أصناف align-content-* (مثل align-content-center، align-content-between).

📖 ملخص

📝 تمارين

  1. ⭐ أنشئ شريط تنقل: شعار على اليسار، 4 روابط في المنتصف، زر تسجيل دخول على اليمين، باستخدام justify-content-between و align-items-center.
  2. ⭐⭐ أنشئ شبكة بطاقات من ثلاثة أعمدة: عمودية على الجوال (flex-column)، أفقية على الأجهزة اللوحية فأكبر (flex-md-row)، مع gap-3 بين البطاقات.
  3. ⭐⭐⭐ أنشئ صفحة تفاعلية لـ Flexbox: اعرض تأثيرات جميع قيم justify-content الست، كل واحد مع شرح نصي و3 كتل ملوّنة.

الدرس السابق: المسافات · الدرس التالي: التصميم المتجاوب

Web-Tutorial.com

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

100%