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

مراجعة 02:30، 15 أبريل 2018

استخدم أدوات 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 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-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>

توجد كذلك تنويعات متجاوبة من الصنف 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 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-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>

توجد تنويعات متجاوبة على أدوات محاذاة العناصر:

‎.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="d-flex bd-highlight mb-3" style="height: 100px">
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="align-self-start 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-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>

توجد كذلك تنويعات متجاوبة من 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 مع الهوامش التلقائيّة. توجد أدناه ثلاثة أمثلة على التحكّم في عناصر 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.

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:أدوات Flexbox في إطار العمل Bootstrap}}</noinclude>
-استخدم أدوات Flexbox التي يقدّمها إطار العمل Bootstrap للتعامل السريع والفعّال مع المُخطَّطات، ومحاذاة ومقاييس أعمدة نظام الشبكة، وعناصر التنقّل والمكوِّنات. يمكن استخدام أنماط CSS مُخصّصة للحصول في تنسيق الصفحات الأكثر تعقيدا.
+استخدم أدوات Flexbox التي يقدّمها إطار العمل Bootstrap للتعامل السريع والفعّال مع [[Bootstrap/layout overview|المُخطَّطات]]، [[Bootstrap/grid|ومحاذاة ومقاييس أعمدة نظام الشبكة]]، [[:تصنيف:Bootstrap components|وعناصر التنقّل والمكوِّنات]]. يمكن استخدام أنماط CSS مُخصّصة لتنسيق الصفحات الأكثر تعقيدًا.
-== تفعيل Flex ==
+== تفعيل السلوك المرن Flex ==
-طبِّق أدوات العرض لإنشاء حاويّات Flex وتحويل '''العناصر الأبناء المباشرة''' إلى عناصر Flex. تتميّز حاويّات وعناصر Flex بإمكانيّة استخدام خاصيّات Flex للتعديل عليها وتخصيصها.<syntaxhighlight lang="html">
+استعمل [[Bootstrap/display|أدوات العرض display]] لإنشاء حاويّات Flex وتحويل '''العناصر الأبناء المباشرة''' إلى عناصر Flex. تتميّز حاويّات وعناصر Flex بإمكانيّة استخدام خاصيّات Flex للتعديل عليها وتخصيصها.<syntaxhighlight lang="html">
 <div class="d-flex p-2 bd-highlight">حاويّة!</div>
 </syntaxhighlight><syntaxhighlight lang="html">
@@ سطر 20: / سطر 20: @@
 == اتّجاهات العناصر ==
-عيِّن اتّجاهات عناصر Flex ضمن حاويّة Flex باستخدام أدوات الاتّجاه. يمكن في أغلب الأحيان تجاهل الصنف الأفقيّ، إذْ أنّ القيمة المبدئيّة في المتصفّح هي <code>row</code>؛ إلّا أنّك قد تحتاج أحيانًا لتحديد هذه القيمة صراحة (في حالة المُخطّطات المتجاوبة مثلا).
+عيِّن اتّجاهات عناصر Flex ضمن حاويّة Flex باستخدام أدوات الاتّجاه. يمكن في أغلب الأحيان تجاهل الصنف الأفقيّ، إذْ أنّ القيمة المبدئيّة في المتصفّح هي <code>row</code>؛ إلّا أنّك قد تحتاج أحيانًا لتحديد هذه القيمة صراحة (في حالة المُخطّطات المتجاوبة مثلًا).
 استخدم الصنف <code>‎.flex-row</code> لتعيين الاتجاه الأفقي (القيمة المبدئيّة في المتصفّح)، أو <code>‎.flex-row-reverse</code> لبدء الاتجاه الأفقي من الجانب المعاكس.<syntaxhighlight lang="html">
@@ سطر 44: / سطر 44: @@
    <div class="p-2 bd-highlight">Flex item 3</div>
 </div>
-</syntaxhighlight>توجد كذلك تنويعات متجاوبة من <code>flex-direction</code> (حيثُ direction تشير إلى الاتّجاه، الأفقيّ <code>row</code> أو العمودي <code>column</code>):
+</syntaxhighlight>توجد كذلك تنويعات متجاوبة من <code>flex-direction</code> (إذ تشير <code>direction</code> إلى الاتّجاه، الأفقيّ <code>row</code> أو العمودي <code>column</code>):
 * <code>‎.flex-row</code>
 * <code>‎.flex-row-reverse</code>
@@ سطر 67: / سطر 67: @@
 == توسيط المحتوى ==
-استخدم أدوات <code>justify-content</code> على حاويّات Flexbox لتغيير محاذاة عناصر Flex على المحور الرئيس (محور السينات X axis في البداية أو محور الصادات Y axis عند استخدام القيمة <code>flex-direction: column</code>). اختر بين <code>start</code> (القيمة المبدئيّة في المتصفّح)، أو <code>end</code>، أو <code>center</code>، أو <code>between</code> أو <code>around</code>.<syntaxhighlight lang="html">
+استخدم أدوات <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="p-2 bd-highlight">Flex item</div>
@@ سطر 121: / سطر 121: @@
 == محاذاة العناصر ==
-استخدم أدوات في حاويّات Flex لتغيير محاذاة عناصر Flex على المحور العابر (محور الصادات Y axis في البداية، ومحور السينات X axis عند استخدام <code>flex-direction: column</code>).  اختر بين <code>start</code>، أو <code>end</code>، أو <code>center</code>، أو <code>baseline</code> أو <code>stretch</code> (القيمة المبدئيّة في المتصفّح).<syntaxhighlight lang="html">
+استخدم أدوات في حاويّات 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="p-2 bd-highlight">Flex item</div>
@@ سطر 175: / سطر 175: @@
 == محاذاة العناصر فرديّا ==
-اسخدم أدوات <code>align-self</code> في عناصر Flex لتغيير محاذاتها فرديّا على المحور العابر (محور الصادات Y axis في البداية، ومحور السينات X axis عند استخدام <code>flex-direction: column</code>). اختر بين <code>start</code>، أو <code>end</code>، أو <code>center</code>، أو <code>baseline</code> أو <code>stretch</code> (القيمة المبدئيّة في المتصفّح).<syntaxhighlight lang="html">
+اسخدم أدوات <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="p-2 bd-highlight">Flex item</div>
@@ سطر 253: / سطر 253: @@
 === الهوامش التلقائيّة مع محاذاة العناصر ===
-امزج بين <code>align-items</code>، و<code>flex-direction: column</code> و <code>margin-top: auto</code> أو <code>margin-bottom: auto</code> لنقل عنصُر Flex عموديًّا إلى أعلى الحاويّة أو أسفلها.<syntaxhighlight lang="html">
+امزج بين <code>[[CSS/align-items|align-items]]</code>، و <code>[[CSS/flex-direction|flex-direction]]: column</code> و <code>[[CSS/margin-top|margin-top]]: auto</code> أو <code>[[CSS/margin-bottom|margin-bottom]]: auto</code> لنقل عنصُر Flex عموديًّا إلى أعلى الحاويّة أو أسفلها.<syntaxhighlight lang="html">
 <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>
@@ سطر 270: / سطر 270: @@
 == التفاف العناصر ==
-تحكّم في كيفيّة التفاف عناصر Flex داخل حاويّة Flex. اختر بين عدم الالتفاف إطلاقًا (القيمة المبدئيّة في المتصفّح) عن طريق الصنف  <code>‎.flex-nowrap</code>، أو الالتفاف (<code>‎.flex-wrap</code>) أو الالتفاف على الجهة المعاكسة (<code>‎.flex-wrap-reverse</code>).<syntaxhighlight lang="html">
+تحكّم في كيفيّة التفاف عناصر Flex داخل حاويّة Flex. اختر بين عدم الالتفاف إطلاقًا (القيمة المبدئيّة في المتصفّح) عن طريق الصنف <code>‎.flex-nowrap</code>، أو الالتفاف (<code>‎.flex-wrap</code>) أو الالتفاف على الجهة المعاكسة (<code>‎.flex-wrap-reverse</code>).<syntaxhighlight lang="html">
    <div class="d-flex flex-nowrap bd-highlight" style="width: 8rem;">
      <div class="p-2 bd-highlight">Flex item</div>
@@ سطر 332: / سطر 332: @@
 == الترتيب ==
-غيّر الترتيب ''البصريّ'' لعناصر Flex مُحدَّدة باستخدام أدوات <code>order</code>. توفَّر مبدئيًّا خيّارات إضافيّة لجعل عنصُر أولًّا أو أخيرًا في الترتيب (<code>order-first</code> و<code>order-last</code>) ولإعادة تعيين الترتيب ليوافق الترتيب في كائن المستنَد. بما أنّ أدوات <code>order</code> تستخدم قيّمًا عدديّة (مثلًا <code>5</code>) فيمكن إنشاء أنماط CSS مُخصَّصة  لإضافة قيّم جديدة.<syntaxhighlight lang="html">
+غيّر الترتيب ''البصريّ'' لعناصر Flex مُحدَّدة باستخدام أدوات <code>order</code>. توفَّر مبدئيًّا خيّارات إضافيّة لجعل عنصُر أولًّا أو أخيرًا في الترتيب (<code>order-first</code> و<code>order-last</code>) ولإعادة تعيين الترتيب ليوافق الترتيب في كائن المستنَد. ولمّا كانت أدوات <code>order</code> تستخدم قيّمًا عدديّة (مثلًا <code>5</code>) فيمكن إنشاء أنماط CSS مُخصَّصة  لإضافة قيّم جديدة.<syntaxhighlight lang="html">
 <div class="d-flex flex-nowrap bd-highlight">
    <div class="order-3 p-2 bd-highlight">First flex item</div>
@@ سطر 339: / سطر 339: @@
 </div>
 </syntaxhighlight>توجد تنويعات متجاوبة على <code>order</code>:
+* <code>‎.order-0</code>
--<code>‎.order-0</code>
+* <code>‎.order-1</code>
+* <code>‎.order-2</code>
--<code>‎.order-1</code>
+* <code>‎.order-3</code>
+* <code>‎.order-4</code>
--<code>‎.order-2</code>
+* <code>‎.order-5</code>
+* <code>‎.order-6</code>
--<code>‎.order-3</code>
+* <code>‎.order-7</code>
+* <code>‎.order-8</code>
--<code>‎.order-4</code>
+* <code>‎.order-9</code>
+* <code>‎.order-10</code>
--<code>‎.order-5</code>
+* <code>‎.order-11</code>
+* <code>‎.order-12</code>
--<code>‎.order-6</code>
+* <code>‎.order-sm-0</code>
+* <code>‎.order-sm-1</code>
--<code>‎.order-7</code>
+* <code>‎.order-sm-2</code>
+* <code>‎.order-sm-3</code>
--<code>‎.order-8</code>
+* <code>‎.order-sm-4</code>
+* <code>‎.order-sm-5</code>
--<code>‎.order-9</code>
+* <code>‎.order-sm-6</code>
+* <code>‎.order-sm-7</code>
--<code>‎.order-10</code>
+* <code>‎.order-sm-8</code>
+* <code>‎.order-sm-9</code>
--<code>‎.order-11</code>
+* <code>‎.order-sm-10</code>
+* <code>‎.order-sm-11</code>
--<code>‎.order-12</code>
+* <code>‎.order-sm-12</code>
+* <code>‎.order-md-0</code>
--<code>‎.order-sm-0</code>
+* <code>‎.order-md-1</code>
+* <code>‎.order-md-2</code>
--<code>‎.order-sm-1</code>
+* <code>‎.order-md-3</code>
+* <code>‎.order-md-4</code>
--<code>‎.order-sm-2</code>
+* <code>‎.order-md-5</code>
+* <code>‎.order-md-6</code>
--<code>‎.order-sm-3</code>
+* <code>‎.order-md-7</code>
+* <code>‎.order-md-8</code>
--<code>‎.order-sm-4</code>
+* <code>‎.order-md-9</code>
+* <code>‎.order-md-10</code>
--<code>‎.order-sm-5</code>
+* <code>‎.order-md-11</code>
+* <code>‎.order-md-12</code>
--<code>‎.order-sm-6</code>
+* <code>‎.order-lg-0</code>
+* <code>‎.order-lg-1</code>
--<code>‎.order-sm-7</code>
+* <code>‎.order-lg-2</code>
+* <code>‎.order-lg-3</code>
--<code>‎.order-sm-8</code>
+* <code>‎.order-lg-4</code>
+* <code>‎.order-lg-5</code>
--<code>‎.order-sm-9</code>
+* <code>‎.order-lg-6</code>
+* <code>‎.order-lg-7</code>
--<code>‎.order-sm-10</code>
+* <code>‎.order-lg-8</code>
+* <code>‎.order-lg-9</code>
--<code>‎.order-sm-11</code>
+* <code>‎.order-lg-10</code>
+* <code>‎.order-lg-11</code>
--<code>‎.order-sm-12</code>
+* <code>‎.order-lg-12</code>
+* <code>‎.order-xl-0</code>
--<code>‎.order-md-0</code>
+* <code>‎.order-xl-1</code>
+* <code>‎.order-xl-2</code>
--<code>‎.order-md-1</code>
+* <code>‎.order-xl-3</code>
+* <code>‎.order-xl-4</code>
--<code>‎.order-md-2</code>
+* <code>‎.order-xl-5</code>
+* <code>‎.order-xl-6</code>
--<code>‎.order-md-3</code>
+* <code>‎‎‎.order-xl-7</code>
+* <code>order-xl-8</code>
--<code>‎.order-md-4</code>
+* <code>‎.order-xl-9</code>
+* <code>‎.order-xl-10</code>
--<code>‎.order-md-5</code>
+* <code>‎.order-xl-11</code>
+* <code>‎.order-xl-12</code>
--<code>‎.order-md-6</code>
--<code>‎.order-md-7</code>
--<code>‎.order-md-8</code>
--<code>‎.order-md-9</code>
--<code>‎.order-md-10</code>
--<code>‎.order-md-11</code>
--<code>‎.order-md-12</code>
--<code>‎.order-lg-0</code>
--<code>‎.order-lg-1</code>
--<code>‎.order-lg-2</code>
--<code>‎.order-lg-3</code>
--<code>‎.order-lg-4</code>
--<code>‎.order-lg-5</code>
--<code>‎.order-lg-6</code>
--<code>‎.order-lg-7</code>
--<code>‎.order-lg-8</code>
--<code>‎.order-lg-9</code>
--<code>‎.order-lg-10</code>
--<code>‎.order-lg-11</code>
--<code>‎.order-lg-12</code>
--<code>‎.order-xl-0</code>
--<code>‎.order-xl-1</code>
--<code>‎.order-xl-2</code>
--<code>‎.order-xl-3</code>
--<code>‎.order-xl-4</code>
--<code>‎.order-xl-5</code>
--<code>‎.order-xl-6</code>
--<code>‎‎‎.order-xl-7</code>
--<code>‎.order-xl-8</code>
--<code>‎.order-xl-9</code>
--<code>‎.order-xl-10</code>
--<code>‎.order-xl-11</code>
--<code>‎.order-xl-12</code>
 == محاذاة المحتوى ==
-استخدم أدوات <code>align-content</code> في حاويّات Flexbox لمحاذاة عناصر Flex '''معًا''' على المحور العابر.  اختر بين <code>start</code> (القيمة المبدئيّة في المتصفّح)، أو <code>end</code>، أو <code>center</code>، أو <code>between</code>، أو <code>around</code> أو <code>stretch</code>. تُستخدَم القيمة <code>flex-wrap: wrap</code> والكثير من عناصر Flex في الأمثلة التاليّة لتوضيح عمل أدوات المحاذاة.
+استخدم أدوات <code>align-content</code> في حاويّات Flexbox لمحاذاة عناصر Flex '''معًا''' على المحور العابر.  اختر بين <code>start</code> (القيمة المبدئيّة في المتصفّح)، أو <code>end</code>، أو <code>center</code>، أو <code>between</code>، أو <code>around</code> أو <code>stretch</code>. تُستخدَم القيمة <code>[[CSS/flex-wrap|flex-wrap]]: wrap</code> والكثير من عناصر Flex في الأمثلة التاليّة لتوضيح عمل أدوات المحاذاة.
 '''تنبيه:''' لا تؤثّر  الخاصيّة على سطر واحد من عناصر Flex.<syntaxhighlight lang="html">