الفرق بين المراجعتين لصفحة: «Bootstrap/flex»

المراجعة الحالية بتاريخ 07:07، 15 يوليو 2020

استخدم أدوات Flexbox التي يقدّمها إطار العمل Bootstrap للتعامل السريع والفعّال مع المُخطَّطات، ومحاذاة ومقاييس أعمدة نظام الشبكة، وعناصر التنقّل والمكوِّنات. يمكن استخدام أنماط CSS مُخصّصة لتنسيق الصفحات الأكثر تعقيدًا.

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

استعمل أدوات العرض display لإنشاء حاويّات Flex وتحويل العناصر الأبناء المباشرة إلى عناصر Flex. تتميّز حاويّات وعناصر Flex بإمكانيّة استخدام خاصيّات Flex للتعديل عليها وتخصيصها.

<div class="d-flex p-2 bd-highlight">حاويّة!</div>

<div class="d-inline-flex p-2 bd-highlight">حاويّة سطريّة تتبع تخطيط Flex!</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

اتّجاهات العناصر

عيِّن اتّجاهات عناصر Flex ضمن حاويّة Flex باستخدام أدوات الاتّجاه. يمكن في أغلب الأحيان تجاهل الصنف الأفقيّ، إذْ أنّ القيمة المبدئيّة في المتصفّح هي row؛ إلّا أنّك قد تحتاج أحيانًا لتحديد هذه القيمة صراحة (في حالة المُخطّطات المتجاوبة مثلًا).

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

<div class="d-flex flex-row bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

يمكن - على نحو مشابه لما سبق - تحديد الاتجاه العمودي باستخدام الصنف ‎.flex-column، أو الصنف ‎.flex-column-reverse لبدء الاتجاه العمودي من الجانب المعاكس.

<div class="d-flex flex-column bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

توجد كذلك تنويعات متجاوبة من flex-direction (إذ تشير direction إلى الاتّجاه، الأفقيّ row أو العمودي column):

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.

توسيط المحتوى

استخدم أدوات justify-content على حاويّات Flexbox لتغيير محاذاة عناصر Flex على المحور الرئيسي (محور السينات [X axis] في البداية أو محور العينات [Y axis] عند استخدام القيمة flex-direction: column). اختر بين start (القيمة المبدئيّة في المتصفّح)، أو end، أو center، أو between أو around.

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

توجد كذلك تنويعات متجاوبة من الصنف justify-content.

‎.justify-content-start
‎.justify-content-end
‎.justify-content-center
‎.justify-content-between
‎.justify-content-around
‎.justify-content-sm-start
‎.justify-content-sm-end
‎.justify-content-sm-center
‎.justify-content-sm-between
‎.justify-content-sm-around
‎.justify-content-md-start
‎.justify-content-md-end
‎.justify-content-md-center
‎.justify-content-md-between
‎.justify-content-md-around
‎.justify-content-lg-start
‎.justify-content-lg-end
‎.justify-content-lg-center
‎.justify-content-lg-between
‎.justify-content-lg-around
‎.justify-content-xl-start
‎.justify-content-xl-end
‎.justify-content-xl-center
‎‎.justify-content-xl-between
‎.justify-content-xl-around

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

استخدم أدوات في حاويّات Flex لتغيير محاذاة عناصر Flex على المحور العابر (محور العينات [Y axis] في البداية، ومحور السينات [X axis] عند استخدام 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-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-self في عناصر Flex لتغيير محاذاتها فرديّا على المحور العابر (محور العينات [Y axis] في البداية، ومحور السينات [X axis] عند استخدام flex-direction: column). اختر بين start، أو end، أو center، أو baseline أو stretch (القيمة المبدئيّة في المتصفّح).

<div class="align-self-start">عنصر مرن</div>
<div class="align-self-end">عنصر مرن</div>
<div class="align-self-center">عنصر مرن</div>
<div class="align-self-baseline">عنصر مرن</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

سلوك الملء

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

<div class="d-flex bd-highlight">
  <div class="p-2 flex-fill bd-highlight">عنصر مرن يحتوي الكثير من المحتوى</div>
  <div class="p-2 flex-fill bd-highlight">عنصر مرن</div>
  <div class="p-2 flex-fill bd-highlight">عنصر مرن</div>
</div>

توجد كذلك تنويعات متجاوبة من flex-fill.

‎.flex-fill

‎.flex-sm-fill‎
‎.flex-md-fill
‎.flex-lg-fill
‎.flex-xl-fill

الانقباض والانبساط

استخدم أدوات .flex-Grow-*‎ لجعل العنصر المرن قادرًا على الانبساط لملء المساحة المتاحة. في المثال أدناه، تستخدم عناصر ‎.flex-Grow-1 كل المساحة المتاحة، مع إبقاء مساحة كافية للعنصرين المتبقيين المرنين.

<div class="d-flex bd-highlight">
  <div class="p-2 flex-grow-1 bd-highlight">عنصر مرن</div>
  <div class="p-2 bd-highlight">عنصر مرن</div>
  <div class="p-2 bd-highlight">عنصر مرن ثالث</div>
</div>

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

<div class="d-flex bd-highlight">
  <div class="p-2 w-100 bd-highlight">عنصر مرن</div>
  <div class="p-2 flex-shrink-1 bd-highlight">عنصر مرن</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 مع الهوامش التلقائيّة. توجد أدناه ثلاثة أمثلة على التحكّم في عناصر Flex باستخدام الهوامش التلقائيّة: القيمة المبدئيّة (لا هوامش)، دفع عنصُريْن إلى اليمين (‎.mr-auto) ودفع عنصُريْن إلى اليسار (‎.ml-auto).

للأسف لا يدعم الإصداران 10 و11 من متصفّح Internet Explorer جيّدًا الهوامش التلقائيّة على عناصر Flex التي تستخدم العناصر الآباء لها قيمة غير مبدئيّة للأداة justify-content. راجع هذه الإجابة على Stackoverflow للمزيد من التفاصيل

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

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

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

الهوامش التلقائيّة مع محاذاة العناصر

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

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

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

التفاف العناصر

تحكّم في كيفيّة التفاف عناصر Flex داخل حاويّة Flex. اختر بين عدم الالتفاف إطلاقًا (القيمة المبدئيّة في المتصفّح) عن طريق الصنف ‎.flex-nowrap، أو الالتفاف (‎.flex-wrap) أو الالتفاف على الجهة المعاكسة (‎.flex-wrap-reverse).

  <div class="d-flex flex-nowrap bd-highlight" style="width: 8rem;">
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
  </div>

<div class="d-flex flex-wrap bd-highlight">
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
  </div>

  <div class="d-flex flex-wrap-reverse bd-highlight">
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
  </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 مُحدَّدة باستخدام أدوات order. توفَّر مبدئيًّا خيّارات إضافيّة لجعل عنصُر أولًّا أو أخيرًا في الترتيب (order-first وorder-last) ولإعادة تعيين الترتيب ليوافق الترتيب في كائن المستنَد. ولمّا كانت أدوات order تستخدم قيّمًا عدديّة (مثلًا 5) فيمكن إنشاء أنماط CSS مُخصَّصة لإضافة قيّم جديدة.

<div class="d-flex flex-nowrap bd-highlight">
  <div class="order-3 p-2 bd-highlight">First flex item</div>
  <div class="order-2 p-2 bd-highlight">Second flex item</div>
  <div class="order-1 p-2 bd-highlight">Third flex item</div>
</div>

توجد تنويعات متجاوبة على order:

‎.order-0
‎.order-1
‎.order-2
‎.order-3
‎.order-4
‎.order-5
‎.order-6
‎.order-7
‎.order-8
‎.order-9
‎.order-10
‎.order-11
‎.order-12
‎.order-sm-0
‎.order-sm-1
‎.order-sm-2
‎.order-sm-3
‎.order-sm-4
‎.order-sm-5
‎.order-sm-6
‎.order-sm-7
‎.order-sm-8
‎.order-sm-9
‎.order-sm-10
‎.order-sm-11
‎.order-sm-12
‎.order-md-0
‎.order-md-1
‎.order-md-2
‎.order-md-3
‎.order-md-4
‎.order-md-5
‎.order-md-6
‎.order-md-7
‎.order-md-8
‎.order-md-9
‎.order-md-10
‎.order-md-11
‎.order-md-12
‎.order-lg-0
‎.order-lg-1
‎.order-lg-2
‎.order-lg-3
‎.order-lg-4
‎.order-lg-5
‎.order-lg-6
‎.order-lg-7
‎.order-lg-8
‎.order-lg-9
‎.order-lg-10
‎.order-lg-11
‎.order-lg-12
‎.order-xl-0
‎.order-xl-1
‎.order-xl-2
‎.order-xl-3
‎.order-xl-4
‎.order-xl-5
‎.order-xl-6
‎‎‎.order-xl-7
order-xl-8
‎.order-xl-9
‎.order-xl-10
‎.order-xl-11
‎.order-xl-12

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

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

تنبيه: لا تؤثّر الخاصيّة على سطر واحد من عناصر Flex.

<div class="d-flex align-content-start flex-wrap bd-highlight mb-3" style="height: 200px">
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
  </div>

 <div class="d-flex align-content-end flex-wrap bd-highlight mb-3" style="height: 200px">
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
  </div>

 <div class="d-flex align-content-center flex-wrap bd-highlight mb-3" style="height: 200px">
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
  </div>

<div class="d-flex align-content-between flex-wrap bd-highlight mb-3" style="height: 200px">
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
  </div>

<div class="d-flex align-content-around flex-wrap bd-highlight mb-3" style="height: 200px">
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex align-content-stretch flex-wrap bd-highlight mb-3" style="height: 200px">
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
</div>

توجد كذلك تنويعات متجاوبة على align-content.

‎.align-content-start
‎.align-content-end
‎.align-content-center
‎.align-content-around
‎.align-content-stretch
‎.align-content-sm-start
‎.align-content-sm-end
‎.align-content-sm-center
‎.align-content-sm-around
‎.align-content-sm-stretch
‎.align-content-md-start
‎.align-content-md-end
‎.align-content-md-center
‎.align-content-md-around
‎.align-content-md-stretch
‎.align-content-lg-start
‎.align-content-lg-end
‎.align-content-lg-center
‎.align-content-lg-around
‎.align-content-lg-stretch
‎.align-content-xl-start
‎.align-content-xl-end
‎.align-content-xl-center
‎.align-content-xl-around
‎.align-content-xl-stretch

مصادر

صفحة Flex في توثيق Bootstrap.

@@ سطر 45: / سطر 45: @@
 </div>
 </syntaxhighlight>توجد كذلك تنويعات متجاوبة من <code>flex-direction</code> (إذ تشير <code>direction</code> إلى الاتّجاه، الأفقيّ <code>row</code> أو العمودي <code>column</code>):
-* <code>‎.flex-row</code>
+* <code>flex-row.</code>
-* <code>‎.flex-row-reverse</code>
+* <code>flex-row-reverse.</code>
-* <code>‎.flex-column</code>
+* <code>flex-column.</code>
-* <code>‎.flex-column-reverse</code>
+* <code>flex-column-reverse.</code>
-* <code>‎.flex-sm-row</code>
+* <code>flex-sm-row.</code>
-* <code>‎.flex-sm-row-reverse</code>
+* <code>flex-sm-row-reverse.</code>
-* <code>‎.flex-sm-column</code>
+* <code>flex-sm-column.</code>
-* <code>‎.flex-sm-column-reverse</code>
+* <code>flex-sm-column-reverse.</code>
-* <code>‎.flex-md-row</code>
+* <code>flex-md-row.</code>
-* <code>‎.flex-md-row-reverse</code>
+* <code>flex-md-row-reverse.</code>
-* <code>‎.flex-md-column</code>
+* <code>flex-md-column.</code>
-* <code>‎.flex-md-column-reverse</code>
+* <code>flex-md-column-reverse.</code>
-* <code>‎.flex-lg-row</code>
+* <code>flex-lg-row.</code>
-* <code>‎.flex-lg-row-reverse</code>
+* <code>flex-lg-row-reverse.</code>
-* <code>‎.flex-lg-column</code>
+* <code>flex-lg-column.</code>
-* <code>‎.flex-lg-column-reverse</code>
+* <code>flex-lg-column-reverse.</code>
-* <code>‎.flex-xl-row</code>
+* <code>flex-xl-row.</code>
-* <code>‎.flex-xl-row-reverse</code>
+* <code>flex-xl-row-reverse.</code>
-* <code>‎.flex-xl-column</code>
+* <code>flex-xl-column.</code>
-* <code>‎.flex-xl-column-reverse</code>
+* <code>flex-xl-column-reverse.</code>
 == توسيط المحتوى ==
 استخدم أدوات <code>justify-content</code> على حاويّات Flexbox لتغيير محاذاة عناصر Flex على المحور الرئيسي (محور السينات [X axis] في البداية أو محور العينات [Y axis] عند استخدام القيمة <code>[[CSS/flex-direction|flex-direction]]: column</code>). اختر بين <code>start</code> (القيمة المبدئيّة في المتصفّح)، أو <code>end</code>، أو <code>center</code>، أو <code>between</code> أو <code>around</code>.<syntaxhighlight lang="html">
-<div class="d-flex justify-content-start bd-highlight mb-3">
+<div class="d-flex justify-content-start">...</div>
-    <div class="p-2 bd-highlight">Flex item</div>
+<div class="d-flex justify-content-end">...</div>
-    <div class="p-2 bd-highlight">Flex item</div>
+<div class="d-flex justify-content-center">...</div>
-    <div class="p-2 bd-highlight">Flex item</div>
+<div class="d-flex justify-content-between">...</div>
-  </div>
+<div class="d-flex justify-content-around">...</div>
-  <div class="d-flex justify-content-end bd-highlight mb-3">
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-  </div>
-  <div class="d-flex justify-content-center bd-highlight mb-3">
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-  </div>
-  <div class="d-flex justify-content-between bd-highlight mb-3">
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-  </div>
-  <div class="d-flex justify-content-around bd-highlight">
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-  </div>
 </syntaxhighlight>توجد كذلك تنويعات متجاوبة من الصنف <code>justify-content</code>.
 * <code>‎.justify-content-start</code>
@@ سطر 122: / سطر 103: @@
 == محاذاة العناصر ==
 استخدم أدوات في حاويّات Flex لتغيير محاذاة عناصر Flex على المحور العابر (محور العينات [Y axis] في البداية، ومحور السينات [X axis] عند استخدام <code>[[CSS/flex-direction|flex-direction]]: column</code>).  اختر بين <code>start</code>، أو <code>end</code>، أو <code>center</code>، أو <code>baseline</code> أو <code>stretch</code> (القيمة المبدئيّة في المتصفّح).<syntaxhighlight lang="html">
-  <div class="d-flex align-items-start bd-highlight mb-3" style="height: 100px">
+<div class="d-flex align-items-start">...</div>
-    <div class="p-2 bd-highlight">Flex item</div>
+<div class="d-flex align-items-end">...</div>
-    <div class="p-2 bd-highlight">Flex item</div>
+<div class="d-flex align-items-center">...</div>
-    <div class="p-2 bd-highlight">Flex item</div>
+<div class="d-flex align-items-baseline">...</div>
-  </div>
+<div class="d-flex align-items-stretch">...</div>
-  <div class="d-flex align-items-end bd-highlight mb-3" style="height: 100px">
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-  </div>
-  <div class="d-flex align-items-center bd-highlight mb-3" style="height: 100px">
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-  </div>
-  <div class="d-flex align-items-baseline bd-highlight mb-3" style="height: 100px">
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-  </div>
-  <div class="d-flex align-items-stretch bd-highlight" style="height: 100px">
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-  </div>
 </syntaxhighlight>توجد تنويعات متجاوبة على أدوات محاذاة العناصر:
 * <code>‎.align-items-start</code>
@@ سطر 176: / سطر 137: @@
 == محاذاة العناصر فرديًّا ==
 اسخدم أدوات <code>align-self</code> في عناصر Flex لتغيير محاذاتها فرديّا على المحور العابر (محور العينات [Y axis] في البداية، ومحور السينات [X axis] عند استخدام <code>[[CSS/flex-direction|flex-direction]]: column</code>). اختر بين <code>start</code>، أو <code>end</code>، أو <code>center</code>، أو <code>baseline</code> أو <code>stretch</code> (القيمة المبدئيّة في المتصفّح).<syntaxhighlight lang="html">
- <div class="d-flex bd-highlight mb-3" style="height: 100px">
+<div class="align-self-start">عنصر مرن</div>
-    <div class="p-2 bd-highlight">Flex item</div>
+<div class="align-self-end">عنصر مرن</div>
-    <div class="align-self-start p-2 bd-highlight">اختر بين `start`، أو `end`، أو `center`، أو `baseline` أو `stretch` (القيمة المبدئيّة في المتصفّح).</div>
+<div class="align-self-center">عنصر مرن</div>
-    <div class="p-2 bd-highlight">Flex item</div>
+<div class="align-self-baseline">عنصر مرن</div>
-  </div>
-  <div class="d-flex bd-highlight mb-3" style="height: 100px">
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="align-self-end p-2 bd-highlight">اختر بين `start`، أو `end`، أو `center`، أو `baseline` أو `stretch` (القيمة المبدئيّة في المتصفّح).</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-  </div>
-  <div class="d-flex bd-highlight mb-3" style="height: 100px">
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="align-self-center p-2 bd-highlight">اختر بين `start`، أو `end`، أو `center`، أو `baseline` أو `stretch` (القيمة المبدئيّة في المتصفّح).</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-  </div>
-  <div class="d-flex bd-highlight mb-3" style="height: 100px">
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="align-self-baseline p-2 bd-highlight">عنصُر Flex مُحاذى فرديّا</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-  </div>
-  <div class="d-flex bd-highlight" style="height: 100px">
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="align-self-stretch p-2 bd-highlight">اختر بين `start`، أو `end`، أو `center`، أو `baseline` أو `stretch` (القيمة المبدئيّة في المتصفّح).</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-  </div>
 </syntaxhighlight>توجد كذلك تنويعات متجاوبة من <code>align-self</code>.
 * <code>‎.align-self-start</code>
@@ سطر 227: / سطر 167: @@
 * <code>‎.align-self-xl-baseline</code>
 * <code>‎.align-self-xl-stretch</code>
+== سلوك الملء ==
+استخدم الصنف‎<code>.flex-fill</code> على سلسلة من العناصر الإخوة لجعل عروضهم مساوية لعرض محتوياتهم (أو إلى عروض متساوية إذا لم تتجاوز محتوياتهم حدودها) مع شغل كل المساحة الأفقية المتاحة.<syntaxhighlight lang="html">
+<div class="d-flex bd-highlight">
+  <div class="p-2 flex-fill bd-highlight">عنصر مرن يحتوي الكثير من المحتوى</div>
+  <div class="p-2 flex-fill bd-highlight">عنصر مرن</div>
+  <div class="p-2 flex-fill bd-highlight">عنصر مرن</div>
+</div>
+</syntaxhighlight>توجد كذلك تنويعات متجاوبة من <code>flex-fill</code>.
+* ‎<code>.flex-fill</code>
+* ‎<code>.flex-sm-fill‎</code>
+* ‎<code>.flex-md-fill</code>
+* ‎<code>.flex-lg-fill</code>
+* ‎<code>.flex-xl-fill</code>
+== الانقباض والانبساط ==
+استخدم أدوات <code>.flex-Grow-*‎</code> لجعل العنصر المرن قادرًا على الانبساط  لملء المساحة المتاحة. في المثال أدناه، تستخدم عناصر ‎<code>.flex-Grow-1</code> كل المساحة المتاحة، مع إبقاء مساحة كافية للعنصرين المتبقيين المرنين.<syntaxhighlight lang="html">
+<div class="d-flex bd-highlight">
+  <div class="p-2 flex-grow-1 bd-highlight">عنصر مرن</div>
+  <div class="p-2 bd-highlight">عنصر مرن</div>
+  <div class="p-2 bd-highlight">عنصر مرن ثالث</div>
+</div>
+</syntaxhighlight>استخدم أدوات ‎<code>.flex-shrink-*‎</code> لجعل العنصر المرن قادرًا على الانقباض إذا لزم الأمر. في المثال أدناه ، سيُجبر العنصر المرن الثاني الذي يستخدم ‎<code>.flex-shrink-1</code> على تغليف محتوياته في سطر جديد،  إذ سينقبض لإتاحة مساحة أكبر للعنصر المرن السابق ذو الصنف ‎<code>.w-100</code>.<syntaxhighlight lang="html">
+<div class="d-flex bd-highlight">
+  <div class="p-2 w-100 bd-highlight">عنصر مرن</div>
+  <div class="p-2 flex-shrink-1 bd-highlight">عنصر مرن</div>
+</div>
+</syntaxhighlight>توجد كذلك تنويعات متجاوبة من <code>flex-grow</code> و  <code>flex-shrink</code>.
+* ‎<code>.flex-{grow|shrink}-0</code>
+* ‎<code>.flex-{grow|shrink}-1</code>
+* ‎<code>.flex-sm-{grow|shrink}-0</code>
+* ‎<code>.flex-sm-{grow|shrink}-1</code>
+* ‎<code>.flex-md-{grow|shrink}-0</code>
+* ‎<code>.flex-md-{grow|shrink}-1</code>
+* ‎<code>.flex-lg-{grow|shrink}-0</code>
+* ‎<code>.flex-lg-{grow|shrink}-1</code>
+* ‎<code>.flex-xl-{grow|shrink}-0</code>
+* ‎<code>.flex-xl-{grow|shrink}-1</code>
 == الهوامش التلقائيّة ==
@@ سطر 248: / سطر 227: @@
    <div class="ml-auto p-2 bd-highlight">Flex item</div>
 </div>
 </syntaxhighlight>
@@ سطر 265: / سطر 242: @@
    <div class="mt-auto p-2 bd-highlight">Flex item</div>
 </div>
 </syntaxhighlight>