آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش کاربرد روش Flex در Bootstrap 4

دوره های مرتبط با این مقاله

آموزش استفاده از Flex در Bootstrap 4:

بوت استرپ 4، از کلاس های Flex برای کنترل چیدمان (layout) اجزای صفحه استفاده می کند.

آموزش FlexBox با بوت استرپ 4:

بزرگترین تفاوت بین Bootstrap 3 و Bootstrap 4 این است که بوت استرپ 4 از FlexBox به جای شناورسازی (floats) جهت مدیریت و چیدمان قرارگیری عناصر صفحه، استفاده می کند.

ماژول قالب بندی Flexible Box، روش ساده تری جهت ایجاد قالب ریسپانسیو و واکنش گرا، بدون استفاده از خاصیت های شناوری (float) و موقعیت (Position)، در اختیارمان قرار داده است. اگر با ماژول Flex آشنا نیستید، به بخش آموزش FlexBox در سایت تحلیل داده بروید.

نکته :

ماژول FlexBox در نسخه های IE9 و قبلتر پشتیبانی نمی شود.

اگر نیاز دارید تا از پشتیبانی مرورگرهای IE9 و IE8 بهره گیرید، از Bootstrap 3 استفاده نمایید. بوت استرپ ورژن 3، پایدارترین نسخه بوت استرپ تا سال 2019 بوده و همچنان توسط تیم تولید کننده جهت رفع باگ های احتمالی و پشتیبانی و آموزش، مورد حمایت است اما ویژگی های جدید بوت استرپ 4، به آن اضافه نشده است!

برای ایجاد یک عنصر دربرگیرنده (Container) ماژول FlexBox و قرار دادن عناصر فرزند مورد نظر در آن، از کلاس d-flex، استفاده نمایید.

مثال: در کد مثال عملی زیر، یک عنصر FlexBox ایجاد کرده ایم که 3 عنصر دیگر درون آن قرار گرفته است.

مثال 1

Flex item 1
Flex item 2
Flex item 3
امتحان کنید

برای ایجاد یک عنصر درون خطی inline flexbox، از کلاس d-inline-flex به صورت زیر استفاده کنید :

مثال 2

Flex item 1
Flex item 2
Flex item 3
امتحان کنید

آموزش چینش افقی Horizontal Direction در FlexBox:

از کلاس flex-row برای نمایش افقی (Horizontal) عناصر به صورت کنار هم استفاده نمایید (این حالت، روش پیش فرض نمایش flexBox است).

نکته :

برای نمایش عناصر از راست به چپ (برعکس حالت پیش فرض)، از کلاس flex-row-reverse استفاده نمایید.

مثال: در کد مثال عملی زیر، گروه اول عناصر را به صورت پیش فرض و از چپ به راست نمایش داده و گروه دوم را به صورت برعکس (از راست به چپ) قرار داده ایم :

مثال 3

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
امتحان کنید

آموزش چینش عمودی عناصر Vertical Direction در FlexBox:

از کلاس flex-column برای نمایش عناصر به صورت عمودی (بر روی هم) استفاده کنید. همچنین کلاس flex-column-reverse، عناصر را به صورت عمودی، ولی با ترتیب برعکس از پایین به بالا، نشان می دهد. همانند کد مثال عملی زیر :

مثال 4

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
امتحان کنید

آموزش ترازبندی خطی (Justify) عناصر در FlexBox:

از کلاس های justify-content-* برای تنظیم ترتیب قرارگیری افقی (Justify) عناصر FlexBox استفاده می شود که در آن * می تواند یکی از مقادیر زیر را داشته باشد :

  • مقدار start : حالت پیش فرض. در این حالت عناصر از سمت چپ به راست مرتب می شوند.
  • مقدار end : در این حالت، عناصر در سمت راست عنصر دربرگیرنده تراز می شوند.
  • مقدار Center: در این حالت عناصر در وسط عنصر دربرگیرنده قرار می گیرند.
  • مقدار between: در این حالت، عنصر اول و آخر به لبه های عنصر مادر چسبیده و سایر عناصر در بین آن ها با فاصله تراز می شوند.
  • مقدار around: در این حالت، عناصر به همراه فضای خالی به صورت مساوی درون عنصر مادر قرار می گیرند.

تمامی موارد فوق را در کد مثال عملی زیر نشان داده ایم :

مثال 5

...
...
...
...
...
امتحان کنید

آموزش ایجاد ستون های هم عرض با flex:

اگر از کلاس flex-fill در عناصر فرزند عنصر دربرگیرنده flex استفاده کنید، ستون ها را با اندازه یکسان ایجاد کرده و کل عرض عنصر مادر را پر می کنند. مثل کد مثال عملی زیر :

مثال 6

Flex item 1
Flex item 2
Flex item 3
امتحان کنید

آموزش بزرگ کردن یک آیتم flex در بوت استرپ 4:

اگر از کلاس flex-grow-1 در یک عنصر flex استفاده کنید، به حدی بزرگ شده و عرض خود را افزایش می دهد تا کل عرض باقی مانده از عنصر مادر را اشغال کند.

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

مثال 7

Flex item 1
Flex item 2
Flex item 3
امتحان کنید
نکته :

اگر از کلاس flex-shrink-1 استفاده کنید، عنصر flex تا حد امکان که محتویات خود را نمایش دهد، کوچک خواهد شد.

آموزش تعیین ترتیب قرارگیری عنصر flex در Bootstrap 4:

با استفاده از کلاس order، می توانید ترتیب قرارگیری و نمایش عناصر flex در یک عنصر دربرگیرنده را تغییر دهید. نحوه استفاده از این کلاس به صورت order-* است که در * اعداد 0 تا 12 می تواند باشد و کمترین عدد همواره بیشترین اولویت را داراست، برای مثال order-1 قبل از order-2 نمایش داده شده و ... .

مثال : در کد مثال عملی زیر، 3 عنصر flex را در یک عنصر دربرگیرنده container تعریف کرده ایم. با تعیین ترتیب قرارگیری توسط کلاس order، عنصر سوم و دوم، جلوتر از عنصر اول نمایش داده شده اند :

مثال 8

Flex item 1
Flex item 2
Flex item 3
امتحان کنید

آموزش تعیین مارجین اتوماتیک در Bootstrap 4 flex :

به راحتی می توانید مارجین اتوماتیک به عناصر flex بدهید. برای این منظور از کلاس mr-auto (چسباندن عنصر به سمت چپ و هل دادن سایر عناصر به سمت راست) و کلاس ml-auto (چسباندن عنصر به سمت راست و هل دادن سایر عناصر به سمت چپ) استفاده می شود.

مثال : در کد مثال زیر، در گروه اول عناصر flex، عنصر اول را با کلاس mr-auto به سمت چپ چسبانده، و در گروه دوم عناصر flex، عنصر سوم را با کلاس ml-auto به سمت راست چسبانده ایم :

مثال 9

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
امتحان کنید

آموزش تعیین نحوه قرارگیری wrap عناصر flex:

می توانید نحوه قرارگیری و نمایش عناصر را در یک عنصر دربرگیرنده (Container) با استفاده از کلاس wrap بوت استرپ 4، تنظیم نمایید. برای این منظور می توانید از 3 کلاس زیر استفاده نموده که حالت خروجی آن ها را در کد مثال عملی، نشان داده ایم :

  • کلاس flex-wrap: حالت پیش فرض- در این حالت عناصر به ترتیب از چپ به راست نمایش داده شده و تا جای ممکن عرض عنصر دربرگیرنده را اشغال کرده و مابقی عناصر در خطوط بعد نمایش داده می شوند.
  • کلاس flex-wrap-reverse: در این حالت عناصر به ترتیب برعکس قرارگیری در کد، نمایش داده شده و تا جای ممکن عرض عنصر دربرگیرنده را اشغال می کنند. مابقی عناصر نیز در خطوط بعد نمایش داده می شوند.
  • کلاس wrap: در این حالت عنصر به ترتیب از چپ به راست نمایش داده شده و همه در کنار هم در یک خط قرار می گیرند، حتی اگر از عرض صفحه یا عنصر دربرگیرنده خارج شوند به خط بعد نمی روند.

مثال 10

..
..
..
امتحان کنید

آموزش تنظیم قرارگیری عمودی عناصر در flex:

نحوه قرارگیری عمودی عناصر flex در یک عنصر Container را با استفاده از کلاس های align-content-* می توانید تنظیم نمایید. این کلاس ها عبارتند از :

  • align-content-start: که حالت پیش فرض است، قرارگیری عناصر در بالای عنصر.
  • align-content-end : قرارگیری در پایین عنصر.
  • align-content-center: قرارگیری در وسط عنصر.
  • align-content-between: قرارگیری در کل ارتفاع عنصر با فاصله.
  • align-content-around: قرارگیری در کل ارتفاع عنصر با فاصله و مارجین.
  • align-content-stretch: قرارگیری در کل ارتفاع عنصر بدون فاصله و مارجین به طوری که عناصر کش می آیند تا کل فضا را اشغال کنند.

مثال : در کد مثال عملی زیر، انواع کلاس های ترازبندی عمودی عناصر flex در بوت استرپ 4 را با خروجی نشان داده ایم :

مثال 11

..
..
..
..
..
امتحان کنید
نکته :

کلاس های فوق بر روی عناصری که فقط یک سطر (row) داشته باشند، تأثیری ندارند و بایستی چندین سطر باشند.

آموزش تنظیم قرارگیری عمودی عناصر یک خطی در flex:

می توانید نحوه قرارگیری عمودی عناصر flex که در یک خط (row) هستند را به وسیله کلاس های align-items-*، تنظیم نمایید. این کلاس ها عبارتند از :

  • کلاس align-items-start : حالت پیش فرض قرارگیری عناصر در بالای عنصر مادر.
  • کلاس align-items-end: قرارگیری عناصر در پایین عنصر.
  • align-items-center: قرارگیری عناصر در وسط عنصر.
  • align-items-stretch : قرارگیری عناصر در بالا و پایین به نحوه ای که به اندازه ارتفاع عنصر مادر کش می آیند و بلند می شوند.

مثال : در کد مثال عملی زیر، انواع حالت ترازبندی و قرارگیری عناصر یک خطی flex به صورت عمودی را در یک عنصر مادر، نشان داده ایم :

مثال 12

..
..
..
..
..
امتحان کنید

آموزش ترازبندی عمودی یک عنصر تکی در flex:

می توانید نحوه قرارگیری عمودی یک عنصر تکی flex را درون عنصر مادر آن، به وسیله کلاس های align-self-*، تعیین نمایید. این کلاس ها عبارتند از :

  • align-self-start : در این حالت عنصر در قسمت بالای عنصر مادر قرار می گیرد.
  • align-self-end: در این حالت، عنصر در پایین عنصر مادر قرار می گیرد.
  • align-self-center: در این حالت، عنصر در میانه عمودی عنصر مادر قرار می گیرد.
  • align-self-baseline: همانند کلاس align-self-start.
  • align-self-stretch: در این حالت عنصر به اندازه ای کش می آید که کل ارتفاع عننصر مادر را اشغال می کند.

مثال : در کد مثال عملی زیر، انواع حالت ترازبندی و قرارگیری یک عنصر تکی flex درون عنصر مادر (Container) آن را نشان داده ایم :

مثال 13

Flex item 1
Flex item 2
Flex item 3
امتحان کنید

آموزش سایر کلاس های ریسپانسیو flex در بوت استرپ 4:

تمامی کلاس های flex ی که در این بخش آموزش دادیم، دارای کلاس های اضافه تری برای طراحی واکنش گرا یا Responsive Design هستند.

در این کلاس ها، شرایط لازم برای اعمال کلاس و خصوصیات آن، بر حسب سایز صفحه نمایش پیش بینی شده است. یعنی مثلا یک کلاس flex فقط در گوشی موبایل اعمال شود و در سایر صفحه ها، اعمال نشود.

در جدول زیر، لیست کامل کلاس های اضافه ریسپانسیو flex به همراه توضیح ارائه شده است. نماد * در این کلاس ها، می تواند یکی از مقادیر sm (صفحات کوچک)، مقدار md (صفحات متوسط)، مقدار lg (صفحات بزرگ) یا مقدار xl (صفحات بسیار بزرگ) را داشته باشد.

کلاس
توضیح
کلاس d-*-flex
این کلاس یک عنصر دربرگیرنده (flexbox container) برای صفحات مختلف نمایش، ایجاد می کند.
کلاس d-*-inline-flex
این کلاس یک عنصر دربرگیرنده فلکس باکس (flexbox container) خطی یا inline برای انواع صفحه نمایش ایجاد می کند.
کلاس flex-*-row
آیتم های flex را به صورت افقی (horizontally) در صفحات مختلف نمایش می دهد.
کلاس flex-*-row-reverse
آیتم های flex را به صورت افقی و با ترتیب برعکس (از راست به چپ) در صفحه های مختلف، نمایش می دهد.
کلاس flex-*-column
آیتم های flex را به صورت عمودی (vertically) در صفحات مختلف نمایش می دهد.
کلاس flex-*-column-reverse
آیتم های flex را به صورت عمودی (vertically) ولی در جهت برعکس (از پایین به بالا) در اندازه های مختلف صفحه نمایش، تنظیم می کند.
کلاس justify-content-*-start
آیتم های flex را به ترتیب از شروع (ترازبندی از سمت چپ)، در اندازه مختلف صفحه، نمایش می دهد.
کلاس justify-content-*-end
آیتم های flex را به ترتیب از آخر (ترازبندی از سمت راست)، در اندازه های مختلف صفحه، نمایش می دهد.
کلاس justify-content-*-center
آیتم های flex را به صورت وسط چین در عنصر دربرگیرنده و در اندازه های مختلف صفحه، نمایش می دهد.
کلاس justify-content-*-between
آیتم های flex را به صورتی که تمام عرض عنصر دربرگیرنده را از ابتدا و انتها و با فاصله اشغال کند، در اندازه های مختلف صفحه، نمایش می دهد.
کلاس justify-content-*-around
آیتم های flex را به صورتی که تمام عرض عنصر دربرگیرنده را با مارجین و فاصله اشغال کنند، در اندازه های مختلف صفحه، نمایش می دهند.
کلاس flex-*-fill
آیتم های flex را با عرض یکسان در کلیه اندازه های صفحه، نمایش می دهد.
کلاس flex-*-grow-o
این کلاس باعث می شود تا کلیه آیتم های flex در یک عنصر دربرگیرنده، اندازه خود را بزرگ نکرده و فقط به حد نیاز، عرض اشغال کنند و در تمامی حالت های مختلف اندازه صفحه نمایش تأثیر دارد.
کلاس flex-*-grow-1
باعث می شود تا کلیه آیتم های Flex در یک عنصر دربرگیرنده، در تمامی صفحات نمایش، اندازه خود را تا حدی که کل عرض صفحه مادر را پر کنند، بزرگ نمایند.
کلاس flex-*-shrink-o
این کلاس باعث می شود تا در اندازه های مختلف صفحه نمایش، آیتم های flex، اندازه خود را کوچک نکنند و با عرض عادی نمایش داده شوند.
کلاس flex-*-shrink-1
این کلاس باعث می شود تا در کلیه اندازه های صفحه نمایش، عناصر flex یک عنصر، در صورت نیاز اندازه خود را برای نمایش بهتر، کوچک یا shrink نمایند.
کلاس order-* -o-12
این کلاس، در تمامی صفحه نمایش ها، ترتیب قرارگیری عناصر Flex در یک عنصر دربرگیرنده را بر حسب شماره، تعیین می کنند.
کلاس flex-*-nowrap
این کلاس باعث می شود تا در کلیه اندازه های مختلف صفحه نمایش، آیتم های flex یک عنصر مادر (wrap) نشوند (در صورت کمبود جای افقی، به خط بعدی می روند).
کلاس flex-*-wrap
این کلاس باعث می شود تا در کلیه اندازه های مختلف صفحه نمایش، آیتم های flex یک عنصر دربرگیرنده wrap شوند (علی رغم عدم وجود اندازه افقی، همگی در یک خط نمایش داده شده و به خط بعدی نمی روند).
کلاس flex-*-wrap-reverse
این کلاس باعث می شود تا در کلیه اندازه های مختلف صفحه نمایش، آیتم های flex در جهت برعکس پیش فرض نمایش داده شده ولی wrap نشوند (در صورت کمبود فضای افقی، به خط بعدی می روند).
کلاس align-content-*-start
این کلاس عناصر flex یک عنصر دربرگیرنده را در تمامی اندازه های صفحات نمایش، از چپ به راست مرتب کرده و نشان می دهد.
کلاس align-content-*-end
این کلاس عناصر flex یک عنصر دربرگیرنده را در تمامی اندازه های صفحه نمایش، از راست به چپ تراز کرده و نشان می دهد.
کلاس align-content-*-center
این کلاس، عناصر flex یک عنصر دربرگیرنده را در اندازه های مختلف صفحه، وسط چین کرده و نمایش می دهد.
کلاس align-content-*-around
این کلاس، عناصر flex یک عنصر container را بدون Padding ولی با فاصله، به طوری که تمامی ارتفاع عنصر مادر را اشغال کنند، در تمامی اندازه های صفحه، نمایش می دهند.
کلاس align-content-*-stretch
این کلاس، عناصر flex یک عنصر مادر را کش داده، به طوری که تمامی ارتفاع عنصر دربرگیرنده را پر کنند و در تمامی اندازه های صفحه، نمایش می دهد.
کلاس align-content-*-start
این کلاس، عناصر flex موجود در یک سطر را در تمامی اندازه های صفحه، از سمت چپ به راست، تراز کرده و نمایش می دهد.
کلاس align-item-*-end
این کلاس، عناصر flex یک سطر یا row را در تمامی اندازه های صفحه نمایش، از سمت راست به چپ مرتب کرده و نشان می دهد.
کلاس align-item-*-center
این کلاس، عناصر flex یک ردیف یا row را در تمامی حالت های صفحه نمایش، وسط چین کرده و نشان می دهد.
کلاس align-items-*-baseline
این کلاس، عناصر flex یک ردیف یا row را در تمامی اندازه های صفحه نمایش، به حالت baseline نشان می دهد.
کلاس align-item-*-stretch
این کلاس، عناصر flex یک سطر یا row را کش داده و در تمامی اندازه های صفحه نمایش، آن ها را به حدی بلند می کند تا کل ارتفاع عنصر دربرگیرنده را پر کنند.
کلاس align-self-*-start
این کلاس، عنصر flex را در قسمت بالای عنصر دربرگیرنده، در تمامی اندازه های صفحه نمایش، قرار می دهد.
کلاس align-self-*-end
این کلاس، عنصر flex را در قسمت پایینی عنصر دربرگیرنده، در تمامی اندازه های صفحه نمایش، قرار می دهد.
کلاس align-self-*-center
این کلاس، عنصر Flex را در قسمت میانی عنصر دربرگیرنده، در تمامی اندازه های صفحه، قرار می دهد.
کلاس align-self-*-baseline
این کلاس، عنصر flex را به صورت baseline در عنصر دربرگیرنده و در تمامی اندازه های صفحه نمایش، قرار می دهد.
کلاس align-self-*-stretch
این کلاس، عنصر flex را به اندازه معادل ارتفاع عنصر دربرگیرنده آن، کش داده تا کل ارتفاع آن را در تمامی اندازه های صفحه نمایش پوشش دهد.
  • 21
  •    0
  • تاریخ ارسال :   1398/08/16

دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .