آموزش Flexbox در بوت استرپ

بهاره حسنیبهاره حسنی
284 بازدید
جعبه ی محتوا
[cdb_box_content css=”.vc_custom_1573310332868{background-color: #1e73be !important;}”]

برای کنترل چیدمان اجزای bootstrap 4 از کلاس های flex استفاده کنید.

بزرگترین تفاوت بین  ۴ ، bootstrap 3 در این است که bootstrap 4 اکنون از flexbox به جای floats برای اجرای طرح استفاده می کند.

در این مبحث کلاس های آماده flexbox در بوت استرپ ۴ را برایتان با ذکر مثال توضیح میدهیم.

[/cdb_box_content]

با عرض سلام و خسته نباشید خدمت کاربران گرامی وب سایت پرنیان طرح

در این مطلب میخواهیم مبحث 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]

تصویر مثال بالا :

انعطاف پذیر

flex

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]

تصویر خروجی مثال بالا :

flex box درون خطی

inline flex

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]

خروجی کدهای مثال بالا :

جهت افقی flexbox

horizontal direction

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]

خروجی مثال بالا :

جهت عمودی flexbox

vertical direction

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]

خروجی این مثال تصویر زیر خواهد بود:

محتوای justify

justify content

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]

خروجی مثال بالا :

عرض مساوی

equal widths

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]

خروجی مثال بالا :

اشغال فضای موجود

grow

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]

تصویر خروجی مثال بالا :

ترتیب بصری

order

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]

تصویر خروجی مثال بالا :

حاشیه ی auto

auto margins

دسته بندی آموزش bootstrap
اشتراک گذاری

نوشته های مرتبط

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

22+ محصولات
401+ سفارشات تکمیل شده
2086+ کاربران
399+ مطالب وبلاگ
سبد خرید

هیچ محصولی در سبد خرید نیست.

ورود به سایت