الفرق بين المراجعتين ل"Bootstrap/flex"
اذهب إلى التنقل
اذهب إلى البحث
(أنشأ الصفحة ب'استخدم أدوات Flexbox التي يقدّمها إطار العمل Bootstrap للتعامل السريع والفعّال مع المُخطَّطات، ومحا...') |
(تحديث إلى 4.5) |
||
| (5 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
| سطر 1: | سطر 1: | ||
| − | استخدم أدوات Flexbox التي يقدّمها إطار العمل Bootstrap للتعامل السريع والفعّال مع | + | <noinclude>{{DISPLAYTITLE:أدوات Flexbox في إطار العمل Bootstrap}}</noinclude> |
| + | استخدم أدوات Flexbox التي يقدّمها إطار العمل Bootstrap للتعامل السريع والفعّال مع [[Bootstrap/layout overview|المُخطَّطات]]، [[Bootstrap/grid|ومحاذاة ومقاييس أعمدة نظام الشبكة]]، [[:تصنيف:Bootstrap components|وعناصر التنقّل والمكوِّنات]]. يمكن استخدام أنماط CSS مُخصّصة لتنسيق الصفحات الأكثر تعقيدًا. | ||
| − | == تفعيل Flex == | + | == تفعيل السلوك المرن Flex == |
| − | + | استعمل [[Bootstrap/display|أدوات العرض display]] لإنشاء حاويّات Flex وتحويل '''العناصر الأبناء المباشرة''' إلى عناصر Flex. تتميّز حاويّات وعناصر Flex بإمكانيّة استخدام خاصيّات Flex للتعديل عليها وتخصيصها.<syntaxhighlight lang="html"> | |
<div class="d-flex p-2 bd-highlight">حاويّة!</div> | <div class="d-flex p-2 bd-highlight">حاويّة!</div> | ||
</syntaxhighlight><syntaxhighlight lang="html"> | </syntaxhighlight><syntaxhighlight lang="html"> | ||
| سطر 19: | سطر 20: | ||
== اتّجاهات العناصر == | == اتّجاهات العناصر == | ||
| − | عيِّن اتّجاهات عناصر Flex ضمن حاويّة Flex باستخدام أدوات الاتّجاه. يمكن في أغلب الأحيان تجاهل الصنف الأفقيّ، إذْ أنّ القيمة المبدئيّة في المتصفّح هي <code>row</code>؛ إلّا أنّك قد تحتاج أحيانًا لتحديد هذه القيمة صراحة (في حالة المُخطّطات المتجاوبة | + | عيِّن اتّجاهات عناصر Flex ضمن حاويّة Flex باستخدام أدوات الاتّجاه. يمكن في أغلب الأحيان تجاهل الصنف الأفقيّ، إذْ أنّ القيمة المبدئيّة في المتصفّح هي <code>row</code>؛ إلّا أنّك قد تحتاج أحيانًا لتحديد هذه القيمة صراحة (في حالة المُخطّطات المتجاوبة مثلًا). |
استخدم الصنف <code>.flex-row</code> لتعيين الاتجاه الأفقي (القيمة المبدئيّة في المتصفّح)، أو <code>.flex-row-reverse</code> لبدء الاتجاه الأفقي من الجانب المعاكس.<syntaxhighlight lang="html"> | استخدم الصنف <code>.flex-row</code> لتعيين الاتجاه الأفقي (القيمة المبدئيّة في المتصفّح)، أو <code>.flex-row-reverse</code> لبدء الاتجاه الأفقي من الجانب المعاكس.<syntaxhighlight lang="html"> | ||
| سطر 43: | سطر 44: | ||
<div class="p-2 bd-highlight">Flex item 3</div> | <div class="p-2 bd-highlight">Flex item 3</div> | ||
</div> | </div> | ||
| − | </syntaxhighlight>توجد كذلك تنويعات متجاوبة من <code>flex-direction</code> ( | + | </syntaxhighlight>توجد كذلك تنويعات متجاوبة من <code>flex-direction</code> (إذ تشير <code>direction</code> إلى الاتّجاه، الأفقيّ <code>row</code> أو العمودي <code>column</code>): |
| − | * <code> | + | * <code>flex-row.</code> |
| − | * <code> | + | * <code>flex-row-reverse.</code> |
| − | * <code> | + | * <code>flex-column.</code> |
| − | * <code> | + | * <code>flex-column-reverse.</code> |
| − | * <code> | + | * <code>flex-sm-row.</code> |
| − | * <code> | + | * <code>flex-sm-row-reverse.</code> |
| − | * <code> | + | * <code>flex-sm-column.</code> |
| − | * <code> | + | * <code>flex-sm-column-reverse.</code> |
| − | * <code> | + | * <code>flex-md-row.</code> |
| − | * <code> | + | * <code>flex-md-row-reverse.</code> |
| − | * <code> | + | * <code>flex-md-column.</code> |
| − | * <code> | + | * <code>flex-md-column-reverse.</code> |
| − | * <code> | + | * <code>flex-lg-row.</code> |
| − | * <code> | + | * <code>flex-lg-row-reverse.</code> |
| − | * <code> | + | * <code>flex-lg-column.</code> |
| − | * <code> | + | * <code>flex-lg-column-reverse.</code> |
| − | * <code> | + | * <code>flex-xl-row.</code> |
| − | * <code> | + | * <code>flex-xl-row-reverse.</code> |
| − | * <code> | + | * <code>flex-xl-column.</code> |
| − | * <code> | + | * <code>flex-xl-column-reverse.</code> |
== توسيط المحتوى == | == توسيط المحتوى == | ||
| − | استخدم أدوات <code>justify-content</code> على حاويّات Flexbox لتغيير محاذاة عناصر Flex على المحور | + | استخدم أدوات <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 | + | <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> | |
| − | + | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
</syntaxhighlight>توجد كذلك تنويعات متجاوبة من الصنف <code>justify-content</code>. | </syntaxhighlight>توجد كذلك تنويعات متجاوبة من الصنف <code>justify-content</code>. | ||
* <code>.justify-content-start</code> | * <code>.justify-content-start</code> | ||
| سطر 120: | سطر 102: | ||
== محاذاة العناصر == | == محاذاة العناصر == | ||
| − | استخدم أدوات في حاويّات Flex لتغيير محاذاة عناصر Flex على المحور العابر (محور | + | استخدم أدوات في حاويّات 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">...</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> | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
</syntaxhighlight>توجد تنويعات متجاوبة على أدوات محاذاة العناصر: | </syntaxhighlight>توجد تنويعات متجاوبة على أدوات محاذاة العناصر: | ||
* <code>.align-items-start</code> | * <code>.align-items-start</code> | ||
| سطر 173: | سطر 135: | ||
* <code>.align-items-xl-stretch</code> | * <code>.align-items-xl-stretch</code> | ||
| − | == محاذاة العناصر | + | == محاذاة العناصر فرديًّا == |
| − | اسخدم أدوات <code>align-self</code> في عناصر Flex لتغيير محاذاتها فرديّا على المحور العابر (محور | + | اسخدم أدوات <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="align-self-start">عنصر مرن</div> | |
| − | + | <div class="align-self-end">عنصر مرن</div> | |
| − | + | <div class="align-self-center">عنصر مرن</div> | |
| − | + | <div class="align-self-baseline">عنصر مرن</div> | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
</syntaxhighlight>توجد كذلك تنويعات متجاوبة من <code>align-self</code>. | </syntaxhighlight>توجد كذلك تنويعات متجاوبة من <code>align-self</code>. | ||
* <code>.align-self-start</code> | * <code>.align-self-start</code> | ||
| سطر 226: | سطر 167: | ||
* <code>.align-self-xl-baseline</code> | * <code>.align-self-xl-baseline</code> | ||
* <code>.align-self-xl-stretch</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> | ||
== الهوامش التلقائيّة == | == الهوامش التلقائيّة == | ||
| سطر 247: | سطر 227: | ||
<div class="ml-auto p-2 bd-highlight">Flex item</div> | <div class="ml-auto p-2 bd-highlight">Flex item</div> | ||
</div> | </div> | ||
| − | |||
| − | |||
</syntaxhighlight> | </syntaxhighlight> | ||
=== الهوامش التلقائيّة مع محاذاة العناصر === | === الهوامش التلقائيّة مع محاذاة العناصر === | ||
| − | امزج بين <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="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="mb-auto p-2 bd-highlight">Flex item</div> | ||
| سطر 264: | سطر 242: | ||
<div class="mt-auto p-2 bd-highlight">Flex item</div> | <div class="mt-auto p-2 bd-highlight">Flex item</div> | ||
</div> | </div> | ||
| − | |||
| − | |||
</syntaxhighlight> | </syntaxhighlight> | ||
== التفاف العناصر == | == التفاف العناصر == | ||
| − | تحكّم في كيفيّة التفاف عناصر Flex داخل حاويّة Flex. اختر بين عدم الالتفاف إطلاقًا (القيمة المبدئيّة في المتصفّح) عن طريق الصنف | + | تحكّم في كيفيّة التفاف عناصر 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="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> | ||
| سطر 331: | سطر 307: | ||
== الترتيب == | == الترتيب == | ||
| − | غيّر الترتيب ''البصريّ'' لعناصر Flex مُحدَّدة باستخدام أدوات <code>order</code>. توفَّر مبدئيًّا خيّارات إضافيّة لجعل عنصُر أولًّا أو أخيرًا في الترتيب (<code>order-first</code> و<code>order-last</code>) ولإعادة تعيين الترتيب ليوافق الترتيب في كائن المستنَد. | + | غيّر الترتيب ''البصريّ'' لعناصر 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="d-flex flex-nowrap bd-highlight"> | ||
<div class="order-3 p-2 bd-highlight">First flex item</div> | <div class="order-3 p-2 bd-highlight">First flex item</div> | ||
| سطر 338: | سطر 314: | ||
</div> | </div> | ||
</syntaxhighlight>توجد تنويعات متجاوبة على <code>order</code>: | </syntaxhighlight>توجد تنويعات متجاوبة على <code>order</code>: | ||
| − | + | * <code>.order-0</code> | |
| − | + | * <code>.order-1</code> | |
| − | + | * <code>.order-2</code> | |
| − | + | * <code>.order-3</code> | |
| − | + | * <code>.order-4</code> | |
| − | + | * <code>.order-5</code> | |
| − | + | * <code>.order-6</code> | |
| − | + | * <code>.order-7</code> | |
| − | + | * <code>.order-8</code> | |
| − | + | * <code>.order-9</code> | |
| − | + | * <code>.order-10</code> | |
| − | + | * <code>.order-11</code> | |
| − | + | * <code>.order-12</code> | |
| − | + | * <code>.order-sm-0</code> | |
| − | + | * <code>.order-sm-1</code> | |
| − | + | * <code>.order-sm-2</code> | |
| − | + | * <code>.order-sm-3</code> | |
| − | + | * <code>.order-sm-4</code> | |
| − | + | * <code>.order-sm-5</code> | |
| − | + | * <code>.order-sm-6</code> | |
| − | + | * <code>.order-sm-7</code> | |
| − | + | * <code>.order-sm-8</code> | |
| − | + | * <code>.order-sm-9</code> | |
| − | + | * <code>.order-sm-10</code> | |
| − | + | * <code>.order-sm-11</code> | |
| − | + | * <code>.order-sm-12</code> | |
| − | + | * <code>.order-md-0</code> | |
| − | + | * <code>.order-md-1</code> | |
| − | + | * <code>.order-md-2</code> | |
| − | + | * <code>.order-md-3</code> | |
| − | + | * <code>.order-md-4</code> | |
| − | + | * <code>.order-md-5</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"> | '''تنبيه:''' لا تؤثّر الخاصيّة على سطر واحد من عناصر Flex.<syntaxhighlight lang="html"> | ||
| سطر 611: | سطر 522: | ||
== مصادر == | == مصادر == | ||
* [https://getbootstrap.com/docs/4.0/utilities/flex/ صفحة Flex في توثيق Bootstrap]. | * [https://getbootstrap.com/docs/4.0/utilities/flex/ صفحة Flex في توثيق Bootstrap]. | ||
| − | [[تصنيف:Bootstrap]] | + | [[تصنيف:Bootstrap|{{SUBPAGENAME}}]] |
| − | [[تصنيف:Bootstrap utilities]] | + | [[تصنيف:Bootstrap utilities|{{SUBPAGENAME}}]] |
المراجعة الحالية بتاريخ 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-7order-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