تخطي إلى المحتوى الرئيسي انتقل إلى ملاحة المستندات
Check
in English

ثني

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

تمكين السلوكيات المرنة

قم بتطبيق displayالأدوات المساعدة لإنشاء حاوية flexbox وتحويل العناصر الفرعية المباشرة إلى عناصر مرنة. يمكن تعديل الحاويات والعناصر المرنة بشكل أكبر بخصائص مرنة إضافية.

أنا حاوية فليكس بوكس!
لغة البرمجة
<div class="d-flex p-2">I'm a flexbox container!</div>
أنا حاوية Flexbox مضمنة!
لغة البرمجة
<div class="d-inline-flex p-2">I'm an inline flexbox container!</div>

توجد اختلافات مستجيبة أيضًا لـ .d-flexو .d-inline-flex.

  • .d-flex
  • .d-inline-flex
  • .d-sm-flex
  • .d-sm-inline-flex
  • .d-md-flex
  • .d-md-inline-flex
  • .d-lg-flex
  • .d-lg-inline-flex
  • .d-xl-flex
  • .d-xl-inline-flex
  • .d-xxl-flex
  • .d-xxl-inline-flex

اتجاه

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

استخدمه .flex-rowلتعيين اتجاه أفقي (المتصفح الافتراضي) ، أو .flex-row-reverseلبدء الاتجاه الأفقي من الجانب المعاكس.

فليكس البند 1
فليكس البند 2
البند المرن 3
فليكس البند 1
فليكس البند 2
البند المرن 3
لغة البرمجة
<div class="d-flex flex-row mb-3">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

تُستخدم .flex-columnلتعيين اتجاه رأسي ، أو .flex-column-reverseلبدء الاتجاه الرأسي من الجانب الآخر.

فليكس البند 1
فليكس البند 2
البند المرن 3
فليكس البند 1
فليكس البند 2
البند المرن 3
لغة البرمجة
<div class="d-flex flex-column mb-3">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

توجد اختلافات مستجيبة أيضًا لـ flex-direction.

  • .flex-row
  • .flex-row-reverse
  • .flex-column
  • .flex-column-reverse
  • .flex-sm-row
  • .flex-sm-row-reverse
  • .flex-sm-column
  • .flex-sm-column-reverse
  • .flex-md-row
  • .flex-md-row-reverse
  • .flex-md-column
  • .flex-md-column-reverse
  • .flex-lg-row
  • .flex-lg-row-reverse
  • .flex-lg-column
  • .flex-lg-column-reverse
  • .flex-xl-row
  • .flex-xl-row-reverse
  • .flex-xl-column
  • .flex-xl-column-reverse
  • .flex-xxl-row
  • .flex-xxl-row-reverse
  • .flex-xxl-column
  • .flex-xxl-column-reverse

تبرير المحتوى

استخدم justify-contentالأدوات المساعدة في حاويات Flexbox لتغيير محاذاة العناصر المرنة على المحور الرئيسي (المحور x للبدء ، المحور y إذا flex-direction: column). اختر من start(المتصفح الافتراضي) ، end، center، between، around، أو evenly.

البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
<div class="d-flex justify-content-evenly">...</div>

توجد اختلافات مستجيبة أيضًا لـ justify-content.

  • .justify-content-start
  • .justify-content-end
  • .justify-content-center
  • .justify-content-between
  • .justify-content-around
  • .justify-content-evenly
  • .justify-content-sm-start
  • .justify-content-sm-end
  • .justify-content-sm-center
  • .justify-content-sm-between
  • .justify-content-sm-around
  • .justify-content-sm-evenly
  • .justify-content-md-start
  • .justify-content-md-end
  • .justify-content-md-center
  • .justify-content-md-between
  • .justify-content-md-around
  • .justify-content-md-evenly
  • .justify-content-lg-start
  • .justify-content-lg-end
  • .justify-content-lg-center
  • .justify-content-lg-between
  • .justify-content-lg-around
  • .justify-content-lg-evenly
  • .justify-content-xl-start
  • .justify-content-xl-end
  • .justify-content-xl-center
  • .justify-content-xl-between
  • .justify-content-xl-around
  • .justify-content-xl-evenly
  • .justify-content-xxl-start
  • .justify-content-xxl-end
  • .justify-content-xxl-center
  • .justify-content-xxl-between
  • .justify-content-xxl-around
  • .justify-content-xxl-evenly

محاذاة العناصر

استخدم align-itemsالأدوات المساعدة في حاويات Flexbox لتغيير محاذاة العناصر المرنة على المحور العرضي (المحور y للبدء ، المحور x إذا flex-direction: column). اختر من start، endأو center، baselineأو stretch(المتصفح الافتراضي).

البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>

توجد اختلافات مستجيبة أيضًا لـ align-items.

  • .align-items-start
  • .align-items-end
  • .align-items-center
  • .align-items-baseline
  • .align-items-stretch
  • .align-items-sm-start
  • .align-items-sm-end
  • .align-items-sm-center
  • .align-items-sm-baseline
  • .align-items-sm-stretch
  • .align-items-md-start
  • .align-items-md-end
  • .align-items-md-center
  • .align-items-md-baseline
  • .align-items-md-stretch
  • .align-items-lg-start
  • .align-items-lg-end
  • .align-items-lg-center
  • .align-items-lg-baseline
  • .align-items-lg-stretch
  • .align-items-xl-start
  • .align-items-xl-end
  • .align-items-xl-center
  • .align-items-xl-baseline
  • .align-items-xl-stretch
  • .align-items-xxl-start
  • .align-items-xxl-end
  • .align-items-xxl-center
  • .align-items-xxl-baseline
  • .align-items-xxl-stretch

محاذاة الذات

استخدم align-selfالأدوات المساعدة على عناصر flexbox لتغيير محاذاة بشكل فردي على المحور المتقاطع (المحور y للبدء ، المحور x إذا flex-direction: column). اختر من نفس الخيارات مثل align-items: start، end، center، baseline، أو stretch(المتصفح الافتراضي).

البند المرن
عنصر مرن محاذاة
البند المرن
البند المرن
عنصر مرن محاذاة
البند المرن
البند المرن
عنصر مرن محاذاة
البند المرن
البند المرن
عنصر مرن محاذاة
البند المرن
البند المرن
عنصر مرن محاذاة
البند المرن
<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>

توجد اختلافات مستجيبة أيضًا لـ align-self.

  • .align-self-start
  • .align-self-end
  • .align-self-center
  • .align-self-baseline
  • .align-self-stretch
  • .align-self-sm-start
  • .align-self-sm-end
  • .align-self-sm-center
  • .align-self-sm-baseline
  • .align-self-sm-stretch
  • .align-self-md-start
  • .align-self-md-end
  • .align-self-md-center
  • .align-self-md-baseline
  • .align-self-md-stretch
  • .align-self-lg-start
  • .align-self-lg-end
  • .align-self-lg-center
  • .align-self-lg-baseline
  • .align-self-lg-stretch
  • .align-self-xl-start
  • .align-self-xl-end
  • .align-self-xl-center
  • .align-self-xl-baseline
  • .align-self-xl-stretch
  • .align-self-xxl-start
  • .align-self-xxl-end
  • .align-self-xxl-center
  • .align-self-xxl-baseline
  • .align-self-xxl-stretch

يملأ

استخدم .flex-fillالفصل في سلسلة من العناصر الشقيقة لإجبارها على عرض مساوٍ لمحتواها (أو عروض متساوية إذا لم يتجاوز محتواها حدود مربعاتها) أثناء تناول كل المساحة الأفقية المتاحة.

العنصر المرن مع الكثير من المحتوى
البند المرن
البند المرن
لغة البرمجة
<div class="d-flex">
  <div class="p-2 flex-fill">Flex item with a lot of content</div>
  <div class="p-2 flex-fill">Flex item</div>
  <div class="p-2 flex-fill">Flex item</div>
</div>

توجد اختلافات مستجيبة أيضًا لـ flex-fill.

  • .flex-fill
  • .flex-sm-fill
  • .flex-md-fill
  • .flex-lg-fill
  • .flex-xl-fill
  • .flex-xxl-fill

النمو وتقليص

استخدم .flex-grow-*الأدوات المساعدة لتبديل قدرة العنصر المرن على النمو لملء المساحة المتاحة. في المثال أدناه ، .flex-grow-1تستخدم العناصر كل المساحة المتاحة ، مع السماح للعنصرين المرنين المتبقيين بالمساحة الضرورية.

البند المرن
البند المرن
العنصر المرن الثالث
لغة البرمجة
<div class="d-flex">
  <div class="p-2 flex-grow-1">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Third flex item</div>
</div>

استخدم .flex-shrink-*الأدوات المساعدة لتبديل قدرة العنصر المرن على التقلص إذا لزم الأمر. في المثال أدناه ، يضطر العنصر المرن الثاني الذي يحمل .flex-shrink-1إلى التفاف محتوياته إلى سطر جديد ، "يتقلص" للسماح بمساحة أكبر للعنصر المرن السابق بـ .w-100.

البند المرن
البند المرن
لغة البرمجة
<div class="d-flex">
  <div class="p-2 w-100">Flex item</div>
  <div class="p-2 flex-shrink-1">Flex item</div>
</div>

توجد اختلافات مستجيبة أيضًا لـ flex-growو flex-shrink.

  • .flex-{grow|shrink}-0
  • .flex-{grow|shrink}-1
  • .flex-sm-{grow|shrink}-0
  • .flex-sm-{grow|shrink}-1
  • .flex-md-{grow|shrink}-0
  • .flex-md-{grow|shrink}-1
  • .flex-lg-{grow|shrink}-0
  • .flex-lg-{grow|shrink}-1
  • .flex-xl-{grow|shrink}-0
  • .flex-xl-{grow|shrink}-1
  • .flex-xxl-{grow|shrink}-0
  • .flex-xxl-{grow|shrink}-1

هوامش السيارات

يمكن لـ Flexbox القيام ببعض الأشياء الرائعة عند مزج المحاذاة المرنة مع الهوامش التلقائية. فيما يلي ثلاثة أمثلة للتحكم في العناصر المرنة عبر الهوامش التلقائية: افتراضي (بدون هامش تلقائي) ، ودفع عنصرين إلى اليمين ( .me-auto) ، ودفع عنصرين إلى اليسار ( .ms-auto).

البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
لغة البرمجة
<div class="d-flex mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex mb-3">
  <div class="me-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ms-auto p-2">Flex item</div>
</div>

مع محاذاة العناصر

انقل عنصرًا واحدًا مرنًا رأسياً إلى أعلى أو أسفل الحاوية عن طريق المزج align-items، flex-direction: columnو margin-top: autoأو margin-bottom: auto.

البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
لغة البرمجة
<div class="d-flex align-items-start flex-column mb-3" style="height: 200px;">
  <div class="mb-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column mb-3" style="height: 200px;">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="mt-auto p-2">Flex item</div>
</div>

طَوّق

تغيير كيفية التفاف العناصر المرنة في حاوية مرنة. اختر من بين عدم وجود التفاف على الإطلاق (المتصفح الافتراضي) مع .flex-nowrapالتفاف .flex-wrapأو عكس التفاف باستخدام .flex-wrap-reverse.

البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
<div class="d-flex flex-nowrap">
  ...
</div>
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
<div class="d-flex flex-wrap">
  ...
</div>
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
<div class="d-flex flex-wrap-reverse">
  ...
</div>

توجد اختلافات مستجيبة أيضًا لـ flex-wrap.

  • .flex-nowrap
  • .flex-wrap
  • .flex-wrap-reverse
  • .flex-sm-nowrap
  • .flex-sm-wrap
  • .flex-sm-wrap-reverse
  • .flex-md-nowrap
  • .flex-md-wrap
  • .flex-md-wrap-reverse
  • .flex-lg-nowrap
  • .flex-lg-wrap
  • .flex-lg-wrap-reverse
  • .flex-xl-nowrap
  • .flex-xl-wrap
  • .flex-xl-wrap-reverse
  • .flex-xxl-nowrap
  • .flex-xxl-wrap
  • .flex-xxl-wrap-reverse

ترتيب

قم بتغيير الترتيب المرئي لعناصر مرنة معينة باستخدام عدد قليل من orderالأدوات المساعدة. نحن نقدم فقط خيارات لإنشاء عنصر أولاً أو أخيرًا ، بالإضافة إلى إعادة تعيين لاستخدام طلب DOM. نظرًا orderلأخذ أي قيمة عدد صحيح من 0 إلى 5 ، أضف CSS مخصصًا لأي قيم إضافية مطلوبة.

أول عنصر مرن
العنصر المرن الثاني
العنصر المرن الثالث
لغة البرمجة
<div class="d-flex flex-nowrap">
  <div class="order-3 p-2">First flex item</div>
  <div class="order-2 p-2">Second flex item</div>
  <div class="order-1 p-2">Third flex item</div>
</div>

توجد اختلافات مستجيبة أيضًا لـ order.

  • .order-0
  • .order-1
  • .order-2
  • .order-3
  • .order-4
  • .order-5
  • .order-sm-0
  • .order-sm-1
  • .order-sm-2
  • .order-sm-3
  • .order-sm-4
  • .order-sm-5
  • .order-md-0
  • .order-md-1
  • .order-md-2
  • .order-md-3
  • .order-md-4
  • .order-md-5
  • .order-lg-0
  • .order-lg-1
  • .order-lg-2
  • .order-lg-3
  • .order-lg-4
  • .order-lg-5
  • .order-xl-0
  • .order-xl-1
  • .order-xl-2
  • .order-xl-3
  • .order-xl-4
  • .order-xl-5
  • .order-xxl-0
  • .order-xxl-1
  • .order-xxl-2
  • .order-xxl-3
  • .order-xxl-4
  • .order-xxl-5

بالإضافة إلى ذلك ، هناك أيضًا فئات متجاوبة .order-firstوفئات .order-lastتغير orderعنصر العنصر عن طريق التطبيق order: -1و order: 6، على التوالي.

  • .order-first
  • .order-last
  • .order-sm-first
  • .order-sm-last
  • .order-md-first
  • .order-md-last
  • .order-lg-first
  • .order-lg-last
  • .order-xl-first
  • .order-xl-last
  • .order-xxl-first
  • .order-xxl-last

محاذاة المحتوى

استخدم align-contentالأدوات المساعدة في حاويات Flexbox لمحاذاة العناصر المرنة معًا على المحور المتقاطع. اختر من start(المتصفح الافتراضي) ، end، center، between، around، أو stretch. لإثبات هذه المرافق ، قمنا بفرض flex-wrap: wrapوزيادة عدد العناصر المرنة.

انتباه! هذه الخاصية ليس لها أي تأثير على الصفوف الفردية من العناصر المرنة.

البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
<div class="d-flex align-content-end flex-wrap">...</div>
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
<div class="d-flex align-content-center flex-wrap">...</div>
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
<div class="d-flex align-content-between flex-wrap">...</div>
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
<div class="d-flex align-content-around flex-wrap">...</div>
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
البند المرن
<div class="d-flex align-content-stretch flex-wrap">...</div>

توجد اختلافات مستجيبة أيضًا لـ align-content.

  • .align-content-start
  • .align-content-end
  • .align-content-center
  • .align-content-between
  • .align-content-around
  • .align-content-stretch
  • .align-content-sm-start
  • .align-content-sm-end
  • .align-content-sm-center
  • .align-content-sm-between
  • .align-content-sm-around
  • .align-content-sm-stretch
  • .align-content-md-start
  • .align-content-md-end
  • .align-content-md-center
  • .align-content-md-between
  • .align-content-md-around
  • .align-content-md-stretch
  • .align-content-lg-start
  • .align-content-lg-end
  • .align-content-lg-center
  • .align-content-lg-between
  • .align-content-lg-around
  • .align-content-lg-stretch
  • .align-content-xl-start
  • .align-content-xl-end
  • .align-content-xl-center
  • .align-content-xl-between
  • .align-content-xl-around
  • .align-content-xl-stretch
  • .align-content-xxl-start
  • .align-content-xxl-end
  • .align-content-xxl-center
  • .align-content-xxl-between
  • .align-content-xxl-around
  • .align-content-xxl-stretch

كائن الوسائط

هل تتطلع إلى نسخ مكون كائن الوسائط من Bootstrap 4؟ أعد إنشائه في وقت قصير باستخدام عدد قليل من الأدوات المساعدة المرنة التي تتيح المزيد من المرونة والتخصيص أكثر من ذي قبل.

Placeholder Image
هذا بعض المحتوى من مكون وسائط. يمكنك استبدال هذا بأي محتوى وتعديله حسب الحاجة.
لغة البرمجة
<div class="d-flex">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
    This is some content from a media component. You can replace this with any content and adjust it as needed.
  </div>
</div>

ولنفترض أنك تريد توسيط المحتوى عموديًا بجوار الصورة:

Placeholder Image
هذا بعض المحتوى من مكون وسائط. يمكنك استبدال هذا بأي محتوى وتعديله حسب الحاجة.
لغة البرمجة
<div class="d-flex align-items-center">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
    This is some content from a media component. You can replace this with any content and adjust it as needed.
  </div>
</div>

ساس

واجهة برمجة تطبيقات المرافق

يتم الإعلان عن أدوات Flexbox المساعدة في واجهة برمجة تطبيقات المرافق لدينا بتنسيق scss/_utilities.scss. تعرف على كيفية استخدام واجهة برمجة تطبيقات المرافق.

    "flex": (
      responsive: true,
      property: flex,
      values: (fill: 1 1 auto)
    ),
    "flex-direction": (
      responsive: true,
      property: flex-direction,
      class: flex,
      values: row column row-reverse column-reverse
    ),
    "flex-grow": (
      responsive: true,
      property: flex-grow,
      class: flex,
      values: (
        grow-0: 0,
        grow-1: 1,
      )
    ),
    "flex-shrink": (
      responsive: true,
      property: flex-shrink,
      class: flex,
      values: (
        shrink-0: 0,
        shrink-1: 1,
      )
    ),
    "flex-wrap": (
      responsive: true,
      property: flex-wrap,
      class: flex,
      values: wrap nowrap wrap-reverse
    ),
    "justify-content": (
      responsive: true,
      property: justify-content,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        between: space-between,
        around: space-around,
        evenly: space-evenly,
      )
    ),
    "align-items": (
      responsive: true,
      property: align-items,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        baseline: baseline,
        stretch: stretch,
      )
    ),
    "align-content": (
      responsive: true,
      property: align-content,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        between: space-between,
        around: space-around,
        stretch: stretch,
      )
    ),
    "align-self": (
      responsive: true,
      property: align-self,
      values: (
        auto: auto,
        start: flex-start,
        end: flex-end,
        center: center,
        baseline: baseline,
        stretch: stretch,
      )
    ),
    "order": (
      responsive: true,
      property: order,
      values: (
        first: -1,
        0: 0,
        1: 1,
        2: 2,
        3: 3,
        4: 4,
        5: 5,
        last: 6,
      ),
    ),