آموزش کامل کار با مدل Flexbox (قسمت دوم)

CSS Flexbox Part 2

0 299

به قسمت دوم آموزش کار با خاصیت Flex در CSS خوش آمدید. در قسمت قبلی تعداد زیادی از خصوصیت های Flexbox را بررسی کردیم و برای هر کدام مثال هایی زدیم. در این قسمت نیز می خواهیم با محوریت مثال ها، با خصوصیات بیشتری آشنا شویم!

خصوصیت align-content

خصوصیت align-content تنظیم کننده ی نحوه ی مرتب شدن خطوط آیتم ها است. همانطور که می دانید آیتم های Flexbox به صورت خطی کنار هم قرار می گیرند مگر اینکه ما این ترتیب را به هم بزنیم.

برای درک بهتر مسئله به عنصر نگهدارنده عرض 600 پیکسلی داده ایم و برای هر مقدار ممکن خصوصیت align-content یک مثال زده ایم.

مثال اول – مقدار space-between که آیتم ها را با فاصله از هم قرار می دهد:

مشاهده ی خروجی در JSBin

مثال دوم – مقدار space-around که بین آیتم ها (قبل و بعد و بینشان) فاصله می گذارد:

مشاهده ی خروجی در JSBin

مثال سوم – مقدار stretch که مقدار پیش فرض است و آیتم ها را آنقدر میکِشد تا تمام فضای خالی را پُر کنند:

مشاهده ی خروجی در JSBin

مثال چهارم – مقدار center که آیتم ها را در وسط صفحه (از نظر محور عمودی) قرار می دهد:

مشاهده ی خروجی در JSBin

مثال پنجم – مقدار flex-start که آیتم ها را در ابتدای نگهدارنده قرار می دهد:

مشاهده ی خروجی در JSBin

مثال ششم – مقدار flex-end که آیتم ها را در انتهای نگهدارنده قرار می دهد:

مشاهده ی خروجی در JSBin

وسط قرار گرفتن عمودی و افقی

اگر شما می خواهید که عنصری را دقیقا در وسط صفحه قرار دهید، هم در محور عمودی و هم در محور افقی، باید مقدار justify-content و align-items را روی center تنظیم کنید. ما در مثال زیر همین کار را انجام داده ایم:

مشاهده ی خروجی در JSBin

ارث بری فرزندان از Flexbox

فرزندان مستقیم یک نگهدارنده که از نوع flexbox باشد، به صورت خودکار به آیتم های flex تبدیل می شوند و نیازی نیست که شما کاری انجام دهید. در مثال زیر چهار آیتم flexbox داریم که داخل یک نگهدارنده ی خاکستری هستند:

مشاهده ی خروجی در JSBin

هر کدام از این آیتم ها، خصوصیات خاصی می گیرند که در زیر لیست شده اند:

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

بیایید آن ها را بررسی کنیم!

خصوصیت order

خصوصیت order ترتیب آیتم های ما را مشخص می کند؛ ممکن است اولین آیتم ای که در HTML نوشته باشیم متعلق به قسمت دیگری باشد بنابراین می توانیم با استفاده از order ترتیب آن را (بدون ویرایش HTML) تغییر دهیم. این خصوصیت تنها اعداد را به عنوان مقدار قبول می کند و مقدار پیش فرض نیز 0 است.

مشاهده ی خروجی در JSBin

خصوصیت flex-grow

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

مشاهده ی خروجی در JSBin

خصوصیت flex-shrink

این خصوصیت تعیین می کند که یک آیتم نسبت به دیگر آیتم ها چقدر کوچک شود (برعکس خصوصیت flex-grow). مقدار پیش فرض این خصوصیت 1 است بنابراین 0 یعنی کمتر از بقیه کوچک شود (بزرگ تر بماند)، 1 یعنی به اندازه و نسبت بقیه ی آیتم ها کوچک شود و هر چیزی بیشتر از 1 یعنی بیشتر از بقیه ی آیتم ها کوچک شود. به مثال زیر توجه کنید:

مشاهده ی خروجی در JSBin

خصوصیت flex-basis

خصوصیت flex-basis می گوید که اندازه ی اولیه ی یک آیتم چقدر باشد. به طور مثال در کد زیر مقدار <div> سوم را روی 200 پیکسل قرار داده ایم؛ یعنی مقدار اولیه ی آن 200 پیکسل باشد اما ممکن است با تغییر سایز صفحه این اندازه هم تغییر کند (اما نسبت اندازه ها حفظ می شود):

مشاهده ی خروجی در JSBin

خصوصیت flex

این خصوصیت دستور خلاصه شده ی تمام خصوصیت های flex-grow و flex-shrink و flex-basis است. در مثال زیر آیتم ها بدون grow هستند (مقدار 0) و بدون shrink هستند (مقدار 0) و طول ابتدایی شان 200 پیکسل است:

مشاهده ی خروجی در JSBin

خصوصیت align-self

خصوصیت align-self تراز آیتم های داخل یک نگهدارنده را مشخص می کند. در واقع دستور align-self خنثی کننده ی دستور align-items است و آن را از کار می اندازد. در دو مثال زیر برای نمایش بهتر، به نگهدارنده ارتفاع 200 پیکسلی داده ایم.

مثال اول – آیتم سوم نگهدارنده را در وسط تراز می کنیم:

مشاهده ی خروجی در JSBin

مثال دوم – آیتم دوم نگهدارنده را در بالا و آیتم سوم را در پایین تراز می کنیم:

مشاهده ی خروجی در JSBin

ایجاد گالری واکنش گرا با flexbox

با استفاده از مدل flexbox می توان گالری بسیار زیبایی ایجاد کرد و انواع حالت ها را به آن داد؛ به طور مثال 4 تصویر یا 2 تصویر کنار هم باشند و یا کل صفحه توسط یک تصویر اشغال شود و … . به مثال زیر توجه کنید:

مشاهده ی خروجی در JSBin

ایجاد وب سایت واکنش گرا با مدل Flexbox

همانطور که گفتیم مدل flexbox استفاده های زیادی دارد که تنها محدود به ساخت یک گالری نیست، بلکه می توانیم کل وب سایت خود را با استفاده از Flexbox بسازیم! به مثال زیر توجه کنید:

مشاهده ی خروجی در JSBin

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

ترتیبی که روکسو برای یادگیری مطالب سری CSS پیشرفته به شما توصیه می‌کند:

ارسال نظر

توجه:‌ آدرس ایمیل شما منتشر نخواهد شد.

film izle | eskisehir escort | modanisa | mersin escort | www.ieski.com | eskort adana | www.izmir-eskort.org | kabak koyu | hd tv izle