المرونة (Flex)

تفعيل سلوكيات المرونة (Flex)

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

<div class="d-flex p-2">I'm a flexbox container!</div>

<div class="d-inline-flex p-2">I'm an inline flexbox container!</div>

توجد أيضاً متغيرات متوافقة مع الشاشات (Responsive) لكل من .d-flex و .d-inline-flex.

الاتجاه

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

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

<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 لبدء الاتجاه الرأسي من الجانب المقابل.

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

توجد أيضاً أشكال متوافقة مع الشاشات (Responsive) لـ flex-direction.

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

استخدم أدوات justify-content على حاويات flexbox لتغيير محاذاة عناصر المرونة (flex items) على المحور الرئيسي (المحور 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>

توجد أيضاً أشكال متوافقة مع الشاشات (Responsive) لـ justify-content.

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

استخدم أدوات align-items على حاويات flexbox لتغيير محاذاة عناصر المرونة (flex items) على المحور المتقاطع (المحور 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>

توجد أيضاً أشكال متوافقة مع الشاشات (Responsive) لـ align-items.

محاذاة ذاتية (Align self)

استخدم أدوات align-self على عناصر المرونة (flexbox items) لتغيير محاذاتها بشكل فردي على المحور المتقاطع (المحور 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>

توجد أيضاً أشكال متوافقة مع الشاشات (Responsive) لـ align-self.

ملء (Fill)

استخدم الفئة (class) .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>

. توجد أيضاً أشكال متوافقة مع الشاشات (Responsive) لـ fill-flex.

النمو والتقلص (Grow and shrink)

استخدم أدوات .flex-grow-* لتبديل قدرة عنصر المرونة (flex item) على النمو لملء المساحة المتاحة. في المثال أدناه، تستخدم العناصر ذات الفئة .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 item) على التقلص إذا لزم الأمر. في المثال أدناه، يتم إجبار عنصر المرونة الثاني ذو الفئة .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>

توجد أيضاً متغيرات متوافقة مع الشاشات (Responsive) لـ flex-grow و flex-shrink.

الهوامش التلقائية (Auto margins)

يمكن لـ 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)

حرك عنصر مرونة واحد رأسياً إلى الأعلى أو الأسفل من الحاوية عن طريق المزج بين 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>

توجد أيضاً أشكال متوافقة مع الشاشات (Responsive) لـ flex-wrap.

الترتيب (Order)

غيّر الترتيب المرئي لعناصر مرونة (flex items) محددة باستخدام مجموعة من أدوات 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>

توجد أيضاً متغيرات متوافقة مع الشاشات (Responsive) لـ order.

توجد أيضاً فئات متوافقة مع الشاشات (Responsive) وهي .order-first و .order-last التي تغير ترتيب العنصر عن طريق تطبيق order: -1 و order: 6 على التوالي.

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

استخدم أدوات align-content على حاويات flexbox لمحاذاة عناصر المرونة (flex items) معاً على المحور المتقاطع. اختر من بين 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>

توجد أيضاً أشكال متوافقة مع الشاشات (Responsive) لـ align-content.

كائن الوسائط (Media object)

هل تتطلع إلى محاكاة مكون كائن الوسائط (media object component) من Bootstrap 4؟ أعد إنشاءه في وقت قصير باستخدام بعض أدوات المرونة (flex) التي تتيح مرونة وتخصيصاً أكبر من ذي قبل.

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

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

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

الـ (CSS)

واجهة برمجة تطبيقات أدوات Sass (Sass utilities API)

يتم التصريح عن أدوات Flexbox في الـ utilities API الخاصة بنا في scss/_utilities.scss. تعلم كيفية استخدام الـ utilities API.

"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,
  ),
),