أدوات Flexbox في إطار العمل Bootstrap
استخدم أدوات Flexbox التي يقدّمها إطار العمل Bootstrap للتعامل السريع والفعّال مع المُخطَّطات، ومحاذاة ومقاييس أعمدة نظام الشبكة، وعناصر التنقّل والمكوِّنات. يمكن استخدام أنماط CSS مُخصّصة للحصول في تنسيق الصفحات الأكثر تعقيدا.
تفعيل Flex
طبِّق أدوات العرض لإنشاء حاويّات 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