پرنیان طرح | انجام امور پرداختی و مجازی | فایل های گرافیکی | پرداخت های بین المللی
نویسنده: بهاره حسنی 
برای کنترل چیدمان اجزای bootstrap 4 از کلاس های flex استفاده کنید.
بزرگترین تفاوت بین 4 ، bootstrap 3 در این است که bootstrap 4 اکنون از flexbox به جای floats برای اجرای طرح استفاده می کند.
در این مبحث کلاس های آماده flexbox در بوت استرپ 4 را برایتان با ذکر مثال توضیح میدهیم.
با عرض سلام و خسته نباشید خدمت کاربران گرامی وب سایت پرنیان طرح
در این مطلب میخواهیم مبحث Flexbox در بوت استرپ را با ذکر مثال آموزش دهیم.
Flexbox :
برای ایجاد یک محتوای flexbox و برای تبدیل مستقیم زیر شاخه ها به آیتم های flex از کلاس d-flex. استفاده کنید.
مثال :
[php]
<div class=”container mt-3″>
<h2>Flex</h2>
<p>To create a flexbox container and transform direct children into flex items, use the d-flex class:</p>
<div class=”d-flex p-3 bg-secondary text-white”>
<div class=”p-2 bg-info”>Flex item 1</div>
<div class=”p-2 bg-warning”>Flex item 2</div>
<div class=”p-2 bg-primary”>Flex item 3</div>
</div>
</div>
[/php]
تصویر مثال بالا :
Inline flexbox :
برای ایجاد یک محتوای flexbox درون خطی از کلاس d-inline-flex. استفاده کنید.
مثال :
[php]
<div class=”container mt-3″>
<h2>Inline Flex</h2>
<p>To create an inline flexbox container, use the d-inline-flex class:</p>
<div class=”d-inline-flex p-3 bg-secondary text-white”>
<div class=”p-2 bg-info”>Flex item 1</div>
<div class=”p-2 bg-warning”>Flex item 2</div>
<div class=”p-2 bg-primary”>Flex item 3</div>
</div>
</div>
[/php]
تصویر خروجی مثال بالا :
Horizontal Direction :
از کلاس flex-row. برای افقی کردن موارد فلکس استفاده کنید.
نکته : برای راست چین کردن جهت افقی از کلاس flex-row-reverse. استفاده کنید.
مثال :
[php]
<div class=”container mt-3″>
<h2>Horizontal Direction</h2>
<p>Use .flex-row to make the flex items appear side by side (default):</p>
<div class=”d-flex flex-row bg-secondary mb-3″>
<div class=”p-2 bg-info”>Flex item 1</div>
<div class=”p-2 bg-warning”>Flex item 2</div>
<div class=”p-2 bg-primary”>Flex item 3</div>
</div>
<p>Use .flex-row-reverse to right-align the direction:</p>
<div class=”d-flex flex-row-reverse bg-secondary”>
<div class=”p-2 bg-info”>Flex item 1</div>
<div class=”p-2 bg-warning”>Flex item 2</div>
<div class=”p-2 bg-primary”>Flex item 3</div>
</div>
</div>
[/php]
خروجی کدهای مثال بالا :
Vertical Direction :
از کلاس flex-column. استفاده کنید تا آیتم های flex را به صورت عمودی نمایش دهید یا از کلاس flex-column-reverse. برای معکوس کردن جهت عمودی استفاده نمایید.
مثال :
[php]
<div class=”container mt-3″>
<h2>Vertical Direction</h2>
<p>Use .flex-column to display the flex items vertically (on top of each other):</p>
<div class=”d-flex flex-column mb-3″>
<div class=”p-2 bg-info”>Flex item 1</div>
<div class=”p-2 bg-warning”>Flex item 2</div>
<div class=”p-2 bg-primary”>Flex item 3</div>
</div>
<p>Use .flex-column-reverse to reverse the vertical direction:</p>
<div class=”d-flex flex-column-reverse “>
<div class=”p-2 bg-info”>Flex item 1</div>
<div class=”p-2 bg-warning”>Flex item 2</div>
<div class=”p-2 bg-primary”>Flex item 3</div>
</div>
</div>
[/php]
خروجی مثال بالا :
Justify Content :
از کلاس های *-justify-content برای عوض کردن جهت قرارگیری آیتم های فلکس استفاده کنید.
برای توضیح بیشتر این مثال را دنبال کنید:
[php]
<div class=”container mt-3″>
<h2>Justify content</h2>
<p>Use the .justify-content-* classes to change the alignment of flex items. Choose from start (default), end, center, between or around:</p>
<div class=”d-flex justify-content-start bg-secondary mb-3″>
<div class=”p-2 bg-info”>Flex item 1</div>
<div class=”p-2 bg-warning”>Flex item 2</div>
<div class=”p-2 bg-primary”>Flex item 3</div>
</div>
<div class=”d-flex justify-content-end bg-secondary mb-3″>
<div class=”p-2 bg-info”>Flex item 1</div>
<div class=”p-2 bg-warning”>Flex item 2</div>
<div class=”p-2 bg-primary”>Flex item 3</div>
</div>
<div class=”d-flex justify-content-center bg-secondary mb-3″>
<div class=”p-2 bg-info”>Flex item 1</div>
<div class=”p-2 bg-warning”>Flex item 2</div>
<div class=”p-2 bg-primary”>Flex item 3</div>
</div>
<div class=”d-flex justify-content-between bg-secondary mb-3″>
<div class=”p-2 bg-info”>Flex item 1</div>
<div class=”p-2 bg-warning”>Flex item 2</div>
<div class=”p-2 bg-primary”>Flex item 3</div>
</div>
<div class=”d-flex justify-content-around bg-secondary mb-3″>
<div class=”p-2 bg-info”>Flex item 1</div>
<div class=”p-2 bg-warning”>Flex item 2</div>
<div class=”p-2 bg-primary”>Flex item 3</div>
</div>
</div>
[/php]
خروجی این مثال تصویر زیر خواهد بود:
Fill / Equal Widths :
از کلاس flex-fill برای دادن عرض یکسان به آیتم های فلکس استفاده نمایید.
مثال :
[php]
<div class=”container mt-3″>
<h2>Fill / Equal Widths</h2>
<p>Use .flex-fill on flex items to force them into equal widths:</p>
<div class=”d-flex mb-3″>
<div class=”p-2 flex-fill bg-info”>Flex item 1</div>
<div class=”p-2 flex-fill bg-warning”>Flex item 2</div>
<div class=”p-2 flex-fill bg-primary”>Flex item 3</div>
</div>
<p>Example without .flex-fill:</p>
<div class=”d-flex mb-3 bg-secondary”>
<div class=”p-2 bg-info”>Flex item 1</div>
<div class=”p-2 bg-warning”>Flex item 2</div>
<div class=”p-2 bg-primary”>Flex item 3</div>
</div>
</div>
[/php]
خروجی مثال بالا :
Grow :
از کلاس روی یک آیتم فلکس برای به دست آوردن بقیه ی فضا استفاده کنید.
در مثال زیر دو آیتم فلکس اول فضای لازم به خود را اختصاص میدهند ، در حالی که مورد آخر بقیه ی فضای موجود را اشغال میکند.
مثال :
[php]
<div class=”container mt-3″>
<h2>Grow</h2>
<p>Use .flex-grow-1 on a flex item to take up the rest of the space:</p>
<div class=”d-flex mb-3″>
<div class=”p-2 bg-info”>Flex item 1</div>
<div class=”p-2 bg-warning”>Flex item 2</div>
<div class=”p-2 flex-grow-1 bg-primary”>Flex item 3</div>
</div>
<p>Example without .flex-grow-1:</p>
<div class=”d-flex mb-3 bg-secondary”>
<div class=”p-2 bg-info”>Flex item 1</div>
<div class=”p-2 bg-warning”>Flex item 2</div>
<div class=”p-2 bg-primary”>Flex item 3</div>
</div>
</div>
[/php]
خروجی مثال بالا :
Order :
ترتیب بصری آیتم های فلکس را با کلاس order. تغییر دهید.
کلاس ها معتبر از ۰ تا ۱۲ هستند جایی که کمترین تعداد بالاترین اولویت را دارد آیتم ۱ قبل از آیتم ۲ و بقیه آیتم ها نشان داده شده است.
مثال :
[php]
<div class=”d-flex mb-3″>
<div class=”p-2 order-3 bg-info”>Flex item 1</div>
<div class=”p-2 order-2 bg-warning”>Flex item 2</div>
<div class=”p-2 order-1 bg-primary”>Flex item 3</div>
</div>
[/php]
تصویر خروجی مثال بالا :
Auto Margins :
به سادگی به آیتم های فلکس حاشیه ی خارجی auto بدهید.
با استفاده از کلاس mr-auto حاشیه از سمت راست و با کلاس ml-auto حاشیه از سمت چپ را ایجاد کنید.
مثال :
[php]
<div class=”d-flex mb-3 bg-secondary”>
<div class=”p-2 mr-auto bg-info”>Flex item 1</div>
<div class=”p-2 bg-warning”>Flex item 2</div>
<div class=”p-2 bg-primary”>Flex item 3</div>
</div>
<div class=”d-flex mb-3 bg-secondary”>
<div class=”p-2 bg-info”>Flex item 1</div>
<div class=”p-2 bg-warning”>Flex item 2</div>
<div class=”p-2 ml-auto bg-primary”>Flex item 3</div>
</div>
</div>
[/php]
تصویر خروجی مثال بالا :
