ثني
قم بإدارة التخطيط والمحاذاة وحجم أعمدة الشبكة والتنقل والمكونات والمزيد بسرعة باستخدام مجموعة كاملة من أدوات Flexbox سريعة الاستجابة. لعمليات التنفيذ الأكثر تعقيدًا ، قد يكون من الضروري استخدام CSS المخصص.
تمكين السلوكيات المرنة
قم بتطبيق display
الأدوات المساعدة لإنشاء حاوية flexbox وتحويل العناصر الفرعية المباشرة إلى عناصر مرنة. يمكن تعديل الحاويات والعناصر المرنة بشكل أكبر بخصائص مرنة إضافية.
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>
توجد اختلافات مستجيبة أيضًا لـ .d-flex
و .d-inline-flex
.
.d-flex
.d-inline-flex
.d-sm-flex
.d-sm-inline-flex
.d-md-flex
.d-md-inline-flex
.d-lg-flex
.d-lg-inline-flex
.d-xl-flex
.d-xl-inline-flex
.d-xxl-flex
.d-xxl-inline-flex
اتجاه
اضبط اتجاه العناصر المرنة في حاوية مرنة مع أدوات مساعدة للاتجاه. في معظم الحالات ، يمكنك حذف الفئة الأفقية هنا لأن المتصفح الافتراضي هو row
. ومع ذلك ، قد تواجه مواقف تحتاج فيها إلى تعيين هذه القيمة بشكل صريح (مثل التنسيقات سريعة الاستجابة).
استخدمه .flex-row
لتعيين اتجاه أفقي (المتصفح الافتراضي) ، أو .flex-row-reverse
لبدء الاتجاه الأفقي من الجانب المعاكس.
<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
.
.flex-row
.flex-row-reverse
.flex-column
.flex-column-reverse
.flex-sm-row
.flex-sm-row-reverse
.flex-sm-column
.flex-sm-column-reverse
.flex-md-row
.flex-md-row-reverse
.flex-md-column
.flex-md-column-reverse
.flex-lg-row
.flex-lg-row-reverse
.flex-lg-column
.flex-lg-column-reverse
.flex-xl-row
.flex-xl-row-reverse
.flex-xl-column
.flex-xl-column-reverse
.flex-xxl-row
.flex-xxl-row-reverse
.flex-xxl-column
.flex-xxl-column-reverse
تبرير المحتوى
استخدم justify-content
الأدوات المساعدة في حاويات Flexbox لتغيير محاذاة العناصر المرنة على المحور الرئيسي (المحور x للبدء ، المحور y إذا flex-direction: column
). اختر من start
(المتصفح الافتراضي) ، end
، center
، between
، around
، أو evenly
.
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
<div class="d-flex justify-content-evenly">...</div>
توجد اختلافات مستجيبة أيضًا لـ justify-content
.
.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around
.justify-content-evenly
.justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-center
.justify-content-sm-between
.justify-content-sm-around
.justify-content-sm-evenly
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-between
.justify-content-md-around
.justify-content-md-evenly
.justify-content-lg-start
.justify-content-lg-end
.justify-content-lg-center
.justify-content-lg-between
.justify-content-lg-around
.justify-content-lg-evenly
.justify-content-xl-start
.justify-content-xl-end
.justify-content-xl-center
.justify-content-xl-between
.justify-content-xl-around
.justify-content-xl-evenly
.justify-content-xxl-start
.justify-content-xxl-end
.justify-content-xxl-center
.justify-content-xxl-between
.justify-content-xxl-around
.justify-content-xxl-evenly
محاذاة العناصر
استخدم align-items
الأدوات المساعدة في حاويات Flexbox لتغيير محاذاة العناصر المرنة على المحور العرضي (المحور y للبدء ، المحور x إذا flex-direction: column
). اختر من start
، end
أو center
، baseline
أو stretch
(المتصفح الافتراضي).
<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>
توجد اختلافات مستجيبة أيضًا لـ align-items
.
.align-items-start
.align-items-end
.align-items-center
.align-items-baseline
.align-items-stretch
.align-items-sm-start
.align-items-sm-end
.align-items-sm-center
.align-items-sm-baseline
.align-items-sm-stretch
.align-items-md-start
.align-items-md-end
.align-items-md-center
.align-items-md-baseline
.align-items-md-stretch
.align-items-lg-start
.align-items-lg-end
.align-items-lg-center
.align-items-lg-baseline
.align-items-lg-stretch
.align-items-xl-start
.align-items-xl-end
.align-items-xl-center
.align-items-xl-baseline
.align-items-xl-stretch
.align-items-xxl-start
.align-items-xxl-end
.align-items-xxl-center
.align-items-xxl-baseline
.align-items-xxl-stretch
محاذاة الذات
استخدم align-self
الأدوات المساعدة على عناصر flexbox لتغيير محاذاة بشكل فردي على المحور المتقاطع (المحور y للبدء ، المحور x إذا flex-direction: column
). اختر من نفس الخيارات مثل align-items
: start
، end
، center
، baseline
، أو stretch
(المتصفح الافتراضي).
<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>
توجد اختلافات مستجيبة أيضًا لـ align-self
.
.align-self-start
.align-self-end
.align-self-center
.align-self-baseline
.align-self-stretch
.align-self-sm-start
.align-self-sm-end
.align-self-sm-center
.align-self-sm-baseline
.align-self-sm-stretch
.align-self-md-start
.align-self-md-end
.align-self-md-center
.align-self-md-baseline
.align-self-md-stretch
.align-self-lg-start
.align-self-lg-end
.align-self-lg-center
.align-self-lg-baseline
.align-self-lg-stretch
.align-self-xl-start
.align-self-xl-end
.align-self-xl-center
.align-self-xl-baseline
.align-self-xl-stretch
.align-self-xxl-start
.align-self-xxl-end
.align-self-xxl-center
.align-self-xxl-baseline
.align-self-xxl-stretch
يملأ
استخدم .flex-fill
الفصل في سلسلة من العناصر الشقيقة لإجبارها على عرض مساوٍ لمحتواها (أو عروض متساوية إذا لم يتجاوز محتواها حدود مربعاتها) أثناء تناول كل المساحة الأفقية المتاحة.
<div class="d-flex bd-highlight">
<div class="p-2 flex-fill bd-highlight">Flex item with a lot of content</div>
<div class="p-2 flex-fill bd-highlight">Flex item</div>
<div class="p-2 flex-fill bd-highlight">Flex item</div>
</div>
توجد اختلافات مستجيبة أيضًا لـ flex-fill
.
.flex-fill
.flex-sm-fill
.flex-md-fill
.flex-lg-fill
.flex-xl-fill
.flex-xxl-fill
النمو وتقليص
استخدم .flex-grow-*
الأدوات المساعدة لتبديل قدرة العنصر المرن على النمو لملء المساحة المتاحة. في المثال أدناه ، .flex-grow-1
تستخدم العناصر كل المساحة المتاحة ، مع السماح للعنصرين المرنين المتبقيين بالمساحة الضرورية.
<div class="d-flex bd-highlight">
<div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Third flex item</div>
</div>
استخدم .flex-shrink-*
الأدوات المساعدة لتبديل قدرة العنصر المرن على التقلص إذا لزم الأمر. في المثال أدناه ، يضطر العنصر المرن الثاني الذي يحمل .flex-shrink-1
إلى التفاف محتوياته إلى سطر جديد ، "يتقلص" للسماح بمساحة أكبر للعنصر المرن السابق بـ .w-100
.
<div class="d-flex bd-highlight">
<div class="p-2 w-100 bd-highlight">Flex item</div>
<div class="p-2 flex-shrink-1 bd-highlight">Flex item</div>
</div>
توجد اختلافات مستجيبة أيضًا لـ flex-grow
و flex-shrink
.
.flex-{grow|shrink}-0
.flex-{grow|shrink}-1
.flex-sm-{grow|shrink}-0
.flex-sm-{grow|shrink}-1
.flex-md-{grow|shrink}-0
.flex-md-{grow|shrink}-1
.flex-lg-{grow|shrink}-0
.flex-lg-{grow|shrink}-1
.flex-xl-{grow|shrink}-0
.flex-xl-{grow|shrink}-1
.flex-xxl-{grow|shrink}-0
.flex-xxl-{grow|shrink}-1
هوامش السيارات
يمكن لـ Flexbox القيام ببعض الأشياء الرائعة عند مزج المحاذاة المرنة مع الهوامش التلقائية. فيما يلي ثلاثة أمثلة للتحكم في العناصر المرنة عبر الهوامش التلقائية: افتراضي (بدون هامش تلقائي) ، ودفع عنصرين إلى اليمين ( .me-auto
) ، ودفع عنصرين إلى اليسار ( .ms-auto
).
<div class="d-flex 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="me-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="ms-auto p-2 bd-highlight">Flex item</div>
</div>
مع محاذاة العناصر
انقل عنصرًا واحدًا مرنًا رأسياً إلى أعلى أو أسفل الحاوية عن طريق المزج align-items
، flex-direction: column
و margin-top: auto
أو margin-bottom: auto
.
<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-nowrap
التفاف .flex-wrap
أو عكس التفاف باستخدام .flex-wrap-reverse
.
<div class="d-flex flex-nowrap">
...
</div>
<div class="d-flex flex-wrap">
...
</div>
<div class="d-flex flex-wrap-reverse">
...
</div>
توجد اختلافات مستجيبة أيضًا لـ flex-wrap
.
.flex-nowrap
.flex-wrap
.flex-wrap-reverse
.flex-sm-nowrap
.flex-sm-wrap
.flex-sm-wrap-reverse
.flex-md-nowrap
.flex-md-wrap
.flex-md-wrap-reverse
.flex-lg-nowrap
.flex-lg-wrap
.flex-lg-wrap-reverse
.flex-xl-nowrap
.flex-xl-wrap
.flex-xl-wrap-reverse
.flex-xxl-nowrap
.flex-xxl-wrap
.flex-xxl-wrap-reverse
ترتيب
قم بتغيير الترتيب المرئي لعناصر مرنة معينة باستخدام عدد قليل من order
الأدوات المساعدة. نحن نقدم فقط خيارات لإنشاء عنصر أولاً أو أخيرًا ، بالإضافة إلى إعادة تعيين لاستخدام طلب DOM. نظرًا order
لأخذ أي قيمة عدد صحيح من 0 إلى 5 ، أضف CSS مخصصًا لأي قيم إضافية مطلوبة.
<div class="d-flex flex-nowrap 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-sm-0
.order-sm-1
.order-sm-2
.order-sm-3
.order-sm-4
.order-sm-5
.order-md-0
.order-md-1
.order-md-2
.order-md-3
.order-md-4
.order-md-5
.order-lg-0
.order-lg-1
.order-lg-2
.order-lg-3
.order-lg-4
.order-lg-5
.order-xl-0
.order-xl-1
.order-xl-2
.order-xl-3
.order-xl-4
.order-xl-5
.order-xxl-0
.order-xxl-1
.order-xxl-2
.order-xxl-3
.order-xxl-4
.order-xxl-5
بالإضافة إلى ذلك ، هناك أيضًا فئات متجاوبة .order-first
وفئات .order-last
تغير order
عنصر العنصر عن طريق التطبيق order: -1
و order: 6
، على التوالي.
.order-first
.order-last
.order-sm-first
.order-sm-last
.order-md-first
.order-md-last
.order-lg-first
.order-lg-last
.order-xl-first
.order-xl-last
.order-xxl-first
.order-xxl-last
محاذاة المحتوى
استخدم align-content
الأدوات المساعدة في حاويات Flexbox لمحاذاة العناصر المرنة معًا على المحور المتقاطع. اختر من start
(المتصفح الافتراضي) ، end
، center
، between
، around
، أو stretch
. لإثبات هذه المرافق ، قمنا بفرض flex-wrap: wrap
وزيادة عدد العناصر المرنة.
انتباه! هذه الخاصية ليس لها أي تأثير على الصفوف الفردية من العناصر المرنة.
<div class="d-flex align-content-start flex-wrap">
...
</div>
<div class="d-flex align-content-end flex-wrap">...</div>
<div class="d-flex align-content-center flex-wrap">...</div>
<div class="d-flex align-content-between flex-wrap">...</div>
<div class="d-flex align-content-around flex-wrap">...</div>
<div class="d-flex align-content-stretch flex-wrap">...</div>
توجد اختلافات مستجيبة أيضًا لـ align-content
.
.align-content-start
.align-content-end
.align-content-center
.align-content-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
.align-content-xxl-start
.align-content-xxl-end
.align-content-xxl-center
.align-content-xxl-around
.align-content-xxl-stretch
كائن الوسائط
هل تتطلع إلى نسخ مكون كائن الوسائط من Bootstrap 4؟ أعد إنشائه في وقت قصير باستخدام عدد قليل من الأدوات المساعدة المرنة التي تتيح المزيد من المرونة والتخصيص أكثر من ذي قبل.
<div class="d-flex">
<div class="flex-shrink-0">
<img src="..." alt="...">
</div>
<div class="flex-grow-1 ms-3">
This is some content from a media component. You can replace this with any content and adjust it as needed.
</div>
</div>
ولنفترض أنك تريد توسيط المحتوى عموديًا بجوار الصورة:
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img src="..." alt="...">
</div>
<div class="flex-grow-1 ms-3">
This is some content from a media component. You can replace this with any content and adjust it as needed.
</div>
</div>
ساس
واجهة برمجة تطبيقات المرافق
يتم الإعلان عن أدوات Flexbox المساعدة في واجهة برمجة تطبيقات المرافق لدينا بتنسيق scss/_utilities.scss
. تعرف على كيفية استخدام واجهة برمجة تطبيقات المرافق.
"flex": (
responsive: true,
property: flex,
values: (fill: 1 1 auto)
),
"flex-direction": (
responsive: true,
property: flex-direction,
class: flex,
values: row column row-reverse column-reverse
),
"flex-grow": (
responsive: true,
property: flex-grow,
class: flex,
values: (
grow-0: 0,
grow-1: 1,
)
),
"flex-shrink": (
responsive: true,
property: flex-shrink,
class: flex,
values: (
shrink-0: 0,
shrink-1: 1,
)
),
"flex-wrap": (
responsive: true,
property: flex-wrap,
class: flex,
values: wrap nowrap wrap-reverse
),
"gap": (
responsive: true,
property: gap,
class: gap,
values: $spacers
),
"justify-content": (
responsive: true,
property: justify-content,
values: (
start: flex-start,
end: flex-end,
center: center,
between: space-between,
around: space-around,
evenly: space-evenly,
)
),
"align-items": (
responsive: true,
property: align-items,
values: (
start: flex-start,
end: flex-end,
center: center,
baseline: baseline,
stretch: stretch,
)
),
"align-content": (
responsive: true,
property: align-content,
values: (
start: flex-start,
end: flex-end,
center: center,
between: space-between,
around: space-around,
stretch: stretch,
)
),
"align-self": (
responsive: true,
property: align-self,
values: (
auto: auto,
start: flex-start,
end: flex-end,
center: center,
baseline: baseline,
stretch: stretch,
)
),
"order": (
responsive: true,
property: order,
values: (
first: -1,
0: 0,
1: 1,
2: 2,
3: 3,
4: 4,
5: 5,
last: 6,
),
),