Flex
از کلاسهای flex برتی کنترل چیدمان مؤلفههای بوت استرپ ۴ استفاده میشود.[۱]
Flexbox
بزرگترین تفاوت بین بوت استرپ ۳ و بوت استرپ ۴ این است که بوت استرپ ۴ بجای floatها از flexbox برای مدیریت چیدمان استفاده میکند.
ماژول چیدمان جعبه منعطف، طراحی ساختار چیدمتن واکنش گرا را بدون float یا مکانیابی (به انگلیسی: Positioning) بهتر میکند. اگر با flex ناآشنا هستید، <translate> نکته</translate> نکته: میتوانید در آموزش CSS Flexbox بیشتر در مورد آن مطالعه کنید.
توجه: flexbox در IE9 و نسخههای قدیمیتر پشتیبانی نمیشود.
اگر نیازمند پشتیبانی IE9 هستید، از بوت استرپ۳ استفاده کنید. زیرا پایدارتین نسخهٔ بوت استرپ است و همچنان توسط تیم بوت استرپ برای bugfixهای مهم و تغییرات مستندسازی پشتیبانی میشود. با این حال، هیچ ویژگیهای جدیدی به آن اضافه نمیشود.برای ایجاد ظرف flexbox و تبدیل فرزندان بی واسطه به آیتمهای flex، از کلاس d-flex
استفاده کنید
مثال
مثال
1 <div class="d-flex p-3 bg-secondary text-white">
2 <div class="p-2 bg-info">Flex item 1</div>
3 <div class="p-2 bg-warning">Flex item 2</div>
4 <div class="p-2 bg-primary">Flex item 3</div>
5 </div>
برای ایجاد ظرف یک flex درون خطی، از کلاس d-inline-flex
استفاده کنید:
مثال
مثال
1 <div class="d-inline-flex p-3 bg-secondary text-white">
2 <div class="p-2 bg-info">Flex item 1</div>
3 <div class="p-2 bg-warning">Flex item 2</div>
4 <div class="p-2 bg-primary">Flex item 3</div>
5 </div>
جهت افقی
از .flex-row
برای نمایش افقی آیتمهای flex (به فارسی: کنار هم) استفاده کنید. این حالت پیش فرض است.
.flex-row-reverse
برای راستچین کردن جهت افقی استفاده کنید:مثال
مثال
1 <div class="d-flex flex-row bg-secondary">
2 <div class="p-2 bg-info">Flex item 1</div>
3 <div class="p-2 bg-warning">Flex item 2</div>
4 <div class="p-2 bg-primary">Flex item 3</div>
5 </div>
6
7 <div class="d-flex flex-row-reverse bg-secondary">
8 <div class="p-2 bg-info">Flex item 1</div>
9 <div class="p-2 bg-warning">Flex item 2</div>
10 <div class="p-2 bg-primary">Flex item 3</div>
11 </div>
جهت عمودی
از .flex-column
برای نمایش آیتمهای flex بطور عمودی (بالای یکدیگر) یا برای معکوس کردن جهت عمودی از .flex-column-reverse
استفاده کنید:
مثال
مثال
1 <div class="d-flex flex-column">
2 <div class="p-2 bg-info">Flex item 1</div>
3 <div class="p-2 bg-warning">Flex item 2</div>
4 <div class="p-2 bg-primary">Flex item 3</div>
5 </div>
6
7 <div class="d-flex flex-column-reverse">
8 <div class="p-2 bg-info">Flex item 1</div>
9 <div class="p-2 bg-warning">Flex item 2</div>
10 <div class="p-2 bg-primary">Flex item 3</div>
11 </div>
Justify کردن محتوا
از کلاسهای .justify-content-*
برای تغییر alignment آیتمهای flex استفاده کنید. کلاسهای معتبر شامل start
(پیش فرض)، end
, center
, between
یاaround
هستند:
مثال
مثال
1 <div class="d-flex justify-content-start">...</div>
2 <div class="d-flex justify-content-end">...</div>
3 <div class="d-flex justify-content-center">...</div>
4 <div class="d-flex justify-content-between">...</div>
5 <div class="d-flex justify-content-around">...</div>
عرضهای مساوی / Fill
از .flex-fill
روی آیتمهای flex استفاده کنید تا عرضهای آنها مساوی شود:
مثال
مثال
1 <div class="d-flex">
2 <div class="p-2 bg-info flex-fill">Flex item 1</div>
3 <div class="p-2 bg-warning flex-fill">Flex item 2</div>
4 <div class="p-2 bg-primary flex-fill">Flex item 3</div>
5 </div>
رشد
برای اشغال کردن فضای باقیمانده، از .flex-grow-1
روی یک آیتم flex استفاده کنید. در مثال زیر، دو آیتم flex اول فضای مورد نیاز خود را اشغال میکنند، درحالیکه آیتم آخر همهٔ فضای باقیمانده را اشغال میکند:
مثال
مثال
1 <div class="d-flex">
2 <div class="p-2 bg-info">Flex item 1</div>
3 <div class="p-2 bg-warning">Flex item 2</div>
4 <div class="p-2 bg-primary flex-grow-1">Flex item 3</div>
5 </div>
.flex-shrink-1
روی آیتم flex استفاده کنید تا در صورت لزوم آنرا فشرده کنید.ترتیب
ترتیب بصری آیتم(ها) را با کلاسهای .order
میتوان تغییر داد. کلاسهای معتبر از ۰ تا ۱۲ هستند بطوری که کمترین عدد بالاترین اولویت را دارد (order-1 قبل از order-2 و … نمایش داده میشود):
مثال
مثال
1 <div class="d-flex bg-secondary">
2 <div class="p-2 bg-info order-3">Flex item 1</div>
3 <div class="p-2 bg-warning order-2">Flex item 2</div>
4 <div class="p-2 bg-primary order-1">Flex item 3</div>
5 </div>
حاشیههای خودکار (به انگلیسی: Auto Margins)
با .mr-auto
به راحتی به آیتمهای flex حاشیه اضافه کنید (آیتم را به سمت راست ببرید) یا با .mr-auto
(آیتم را به سمت چپ ببرید):
مثال
مثال
1 <div class="d-flex bg-secondary">
2 <div class="p-2 mr-auto bg-info">Flex item 1</div>
3 <div class="p-2 bg-warning">Flex item 2</div>
4 <div class="p-2 bg-primary">Flex item 3</div>
5 </div>
6
7 <div class="d-flex bg-secondary">
8 <div class="p-2 bg-info">Flex item 1</div>
9 <div class="p-2 bg-warning">Flex item 2</div>
10 <div class="p-2 ml-auto bg-primary">Flex item 3</div>
11 </div>
Wrap
کنترل اینکه آیتمهای flex چگونه داخل یک Container (به فارسی: ظرف) flex قرار بگیرند، بوسیلهٔ کلاسهای .flex-nowrap
(پیش فرض)، .flex-nowrap
یا .flex-wrap-reverse
انجام میشود.
برای مشاهدهٔ تفاوت بین این سه کلاس با تغییر wrapping آیتمهای flex برروی کلیدها در کادر مثال کلیک کنید:
مثال
مثال
1 <div class="d-flex flex-wrap">..</div>
2
3 <div class="d-flex flex-wrap-reverse">..</div>
4
5 <div class="d-flex flex-nowrap">..</div>
نحوهٔ قرارگیری (به انگلیسی: Align) محتوا
با کلاسهای .align-content-*
نحوه قرارگیری عمودی آیتمهای جمع شده flex را میتوان کنترل کرد. کلاسهای معتبر عبارتند از : .align-content-start
(پیش فرض)، .align-content-end
,.align-content-center
,.align-content-between
, .align-content-around
و .align-content-stretch
.
در مثال زیر برروی کلیدها کلیک کنید تا تفاوت بین این پنج کلاس را با تغییر alignment عمودی آیتمهای flex مشاهده کنید:
مثال
مثال
1 <div class="d-flex flex-wrap align-content-start">..</div>
2
3 <div class="d-flex flex-wrap align-content-end">..</div>
4
5 <div class="d-flex flex-wrap align-content-center">..</div>
6
7 <div class="d-flex flex-wrap align-content-around">..</div>
8
9 <div class="d-flex flex-wrap align-content-stretch">..</div>
نحوه قرارگیری (به انگلیسی: Align) آیتمها
Alignment عمودی یک ردیف از آیتمهای flex را با کلاسهای .align-items-*
میتوان کنترل کرد. کلاسهای معتبر عبارتند از : .align-items-start
, .align-items-end
, .align-items-center
, .align-items-baseline
و .align-items-stretch
(پیش فرض).
برای مشاهده تفاوت این پنج کلاس، برروی کلیدهای زیر کلیک کنید:
مثال
مثال
1 <div class="d-flex align-items-start">..</div>
2
3 <div class="d-flex align-items-end">..</div>
4
5 <div class="d-flex align-items-center">..</div>
6
7 <div class="d-flex align-items-baseline">..</div>
8
9 <div class="d-flex align-items-stretch">..</div>
Align Self
با استفاده ارز کلاسهای .align-self-*
نحوه قرارگیری یک آیتم flex خاص را میتوان کنترل کرد. کلاسهای معتبر عبارتند از : .align-self-start
,.align-self-end
,.align-self-center
,.align-self-baseline
و .align-self-stretch
(پیش فرض).
برای مشاهده تفاوت این پنج کلاس، برروی کلیدهای زیر کلیک کنید:
مثال
مثال
1 <div class="d-flex bg-light" style="height:150px">
2 <div class="p-2 border">Flex item 1</div>
3 <div class="p-2 border align-self-start">Flex item 2</div>
4 <div class="p-2 border">Flex item 3</div>
5 </div>
کلاسهای Flex واکنش گرا
همهٔ کلاسهای flex کلاسهای واکنش گرای اضافی دارند، که تنظیم یک کلاس flex خاص را در یک صفحه نمایش خاص آسان میکند.
نماد *
را میتوان با sm, md, lg یا xl جایگزین کزد که نشان دهندهٔ صفحه نمایشهای کوچک، متوسط، بزرگ و خیلی بزرگ هستند.
منابع آموزشی