آموزش بوت استرپ (فلکس باکس (flexbox) در بوت استرپ)

آموزش بوت استرپ 4 ، (فلکس باکس (flexbox) در بوت استرپ)

برای دادن خاصیت فلکس باکس به یک المنت یا فرزندان آن کافیست ما فقط . d-flex  را بدهیم.

مثال:

<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 .

Direction

همانطور که میدانید ما در فلکس باکس  از flex-direction  جهت تغییر المان ها در ردیف ها و ستون ها استفاده میکنیم که همین خودش مقدار هایی میگیرد. حالا نحوه استفاده از این دستور ها را در بوت استرپ میتوانید در نمونه های زیر مشاهده کنید:

استفاده از  . 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-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

 Justify-content تراز بندی را در امتداد محور اصلی تعریف می کند.با استفاده از آن میتوانید المان ها را در خط راست تنظیم کنید.این عنوان پنج مقدار میگرد:

<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>

Justify-content نیز مانند موارد بالا مقادیر رسپانسیو در بوت استرپ را میگیرد.

Align-items

با استفاده از از ویژگی align-items ما میتوانیم موقعیت قرارگیری المان ها را که در ظرف فلکس هستند را تنظیم کنیم. که پنج مقدار میگیرد:

<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-self

align-self همان کاری را که در فلکس میکند را نیز در بوت استرپ با ساختار زیر انجام دهد .

نمونه:

<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 نیز مانند موارد بالا مقادیر ریسپانسیو را در بوت استرپ را میگیرد.

با استفاده از کلاس . 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>

برای خواندن مقاله آموزش بوت استرپ،alertها در بوت استرپ بر روی لینک کلیک کنید

کلمات کلیدی:flexboxدر بوت استرپ،بوت استرپ و فلکس باکس،بوت استرپ و flexbox،فلکس باکس در بوت استرپ