قسمت سی و دوم bootstrap : نحوه ی استفاده از Flex در بوت استرپ 4

خانه » مقالات اموزشی » قسمت سی و دوم bootstrap : نحوه ی استفاده از Flex در بوت استرپ 4
Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on whatsapp
Share on telegram
Share on print
قسمت سی و دوم bootstrap : نحوه ی استفاده از Flex در بوت استرپ 4

نویسنده:

مرتضی افضلی

Statistics-rafiki

تعداد بازدید:

Calendar-amico (2)

تاریخ انتشار:

2021-08-16

Work time-rafiki

زمان مطالعه:

8 دقیقه

می توانید برای کنترل طرح اجزای بوت استرپ 4 از کلاسهای فلکس استفاده کنید. در این قسمت از آموزش های بوت استرپ به صورت کامل قرار است فلکس ها را مورد بررسی قرار دهیم.

flexbox

یکی از بزرگترین تفاوت های بوت استرپ 4 ، نسبت به بوت استرپ 3 ، استفاده کردن از flexbox ها بجای float برای کنترل راحت لایه ها است.

استفاده کردن از فلکس باکس ها به ما در طراحی راحت تر و بهینه تر و همچنین در طراحی وانشگرا بدون نیاز به استفاده از float و position کمک می کند.

نکته : متاسفانه مروگر اینترنت اکسپلور 9 از فلکس باکس ها پشتیبانی نمیکند و مجبور به استفاده کردن از بوت استرپ 3 هستید.

برای ایجاد یک محتوای حاوی فلکس باکس ، که تمامی زیرمجموعه های آن از فلکش باکس پیروی کنند باید از کلاس d-flex به صورت زیر استفاده کنیم :

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

جهت افقی

برای نمایش دادن افقی فلکس باکس ها از کلاس .flex-row استفاده می کنیم.

برای نمایش فلکس باکس ها به جهت راستچین باید از کلاس .flex-row-reverse استفاده کنیم.

جهت عمودی

برای قرارگیری مرتب پشت سرهم در جهت عمودی از کلاس .flex-column استفاده می کنیم.

برای معکوس کردن این چینش از کلاس .flex-column-reverse استفاده می کنیم.

چینش محتوا

برای اصلاح چینش محتواها می توانیم از کلاس .justify-content-* استفاده کنیم ، به یاد داشته باشید برای اینکه محل دقیق را تعیین کنیم جایگزین * می توانیم موارد زیر را قرار دهیم:

  • start
  • end
  • center
  • between
  • around

پوشش کامل

برای اینکه لایه ی شما پوشش عرضی کامل در نمایشگر داشته باشد از کلاس .flex-fill باید استفاده کنید.

پوشش خاص

با استفاده از کلاس .flex-grow-1 می توانید مشخص کنید کدام آیتم تا انتها فضا را به خود اختصاص دهد. برای مثال ، لایه های 1 و 2 در مثال زیر مقدار لازم را به خود اختصاص داده اند در صورتی که لایه سوم فضای خالی باقی مانده تا انتها را به خود اختصاص داده است. برای درک بهتر حتما سورس کدها را اجرا کنید:

نکته: از .flex-shrink-1 در مورد فلکس استفاده کنید تا در صورت لزوم کوچک شود.

ترتیب

برای ایجاد تغییر در ترتیب المان ها از کلاس .order استفاده می کنیم . میزان مجاز برای استفاده از کلاس order از 0 تا 12 است که کمترین عدد ، بالاترین اولیت را دارد . برای درک بهتره به قطعه کد زیر دقت کنید.

حاشیه های خودکار

برای ترازکردن المان ها از حاشیه ها می توانیم از کلاس .mr-auto برای میزان دهی از سمت راست و .ml-auto برای میزان دهی از سمت چپ استفاده کنیم . برای درک بهتر به قطعه کد زیر توجه کنید :

بسته بندی کردن

نحوه بسته بندی اقلام انعطاف پذیر در المنهای انعطاف پذیر ( برای واکنشگرایی بیشتر) را با .flex-nowrap (به طور پیش فرض) ، .flex-wrap یا .flex-wrap-reverse را کنترل کنید.

با اجرا کردن قطعه کد زیر این موضوع را راحت تر درک می کنید:

چینش محتوا

برای کنترل چینش محتواها در ترازهای عمودی در فلکس باکس ها از کلاس .align-content-* با مقادیر .align-content-start ( پیش فرض ) ، .align-content-end ، .align-content-center ، .align-content-between ، .align-content-around ، و .align-content-stretch می توانیم استفاده کنیم.

به یاد داشته باشید که این کلاسها هیچ تاثیری بر روی تک ردیف موارد فلکس ندارند.

برای درک بهتر این موضوع قطعه کد زیر را اجرا کنید تا تفاوت هریک از کلاس ها را بتوانید لمس کنید :

چینش آیتم ها

برای تغییر دادن هریک از ردیف ها در فلکس باکس ها از کلاس .align-items-* استفاده میکنیم . مقادیر قابل استفاده برابرند با : .align-items-start ، .align-items-end ، .align-items-center ، .align-items-baseline و .align-items-stretch ( به صورت پیش فرض ).

برای درک بهتر این کلاس ها ، قطعه کد زیر را اجرا کنید :

تراز تک آیتم

برای تراز کردن تک آیتم باید از کلاس .align-self-* با مقادیر : .align-self-start ، .align-self-end ، .align-self-center ، .align-self-baseline و .align-self-stretch ( به صورت پیش فرض ) استفاده کنید.

برای درک بهتر این موضوع قطعه کد زیر را اجرا کنید:

پیشنهاد میکنم برای دریافت اطلاعات بیشتر در رابطه با بوت استرپ به سایت getbootstrap مراجعه فرمایید.

همچنین برای یادگیری بیشتر میتوانید به آموزش رایگان بوت استرپ 4 مراجعه فرمایید.

مرتضی افضلی

مرتضی افضلی

این روزها دیگر نیاز نیست کلی هزینه‌ی اجاره‌ی مغازه بدهید. با دنیای کسب‌وکار اینترنتی و دیجیتال مارکتینگ می‌توانیم کسب درامد داشته باشیم و من در مجموعه‌ی کدپز در این راه همراه شما هستم.

تا کنون 264 نفر در کدپز ثبت نام کرده اند.

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