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

CSS Flexbox Part 1

0 496

Flexbox در CSS چیست؟

به قسمتی دیگر از سری آموزشی CSS پیشرفته خوش آمدید. باید بدانید که قبل از معرفی Flexbox در css ، چهار حالت مختلف برای نمایش طرح کلی صفحه وجود داشت:

  • Block برای قسمت های مختلف یک صفحه
  • Inline برای متن ها
  • Table (جدول) برای داده های دو بعدی جدول ها
  • Positioned برای تعیین موقعیت صریح یک عنصر

اما خاصیت Flexible Box یا به اختصار Flexbox در css ، کار طراحی صفحات واکنش گرا (بدون استفاده از float و …) را بسیار آسان کرده است. پشتیبانی از این خصوصیت در مرورگرهای مختلف به این شرح است:

کروم Edge فایرفاکس سافاری اپرا
29.0 11.0 22.0 10 48

عناصر Flexbox

برای استفاده از مدل Flexbox باید ابتدا یک نگهدارنده (container) ایجاد کنید. به این مثال توجه کنید:

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

همانطور که در مثال می بینید برای استفاده از Flexbox باید display را برای عنصر نگهدارنده روی flex تنظیم کنیم. بدین صورت عناصر داخل آن هر کدام یک آیتم flexbox محسوب می شوند.

قبلا هم گفتیم که عنصر نگهدارنده با تنظیم display به flex وارد حالت Flexbox می شود:

اما این تنها خصوصیت عنصر نگهدارنده (container) نیست. این عنصر دارای خصوصیات زیر نیز می باشد:

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

قصد داریم تک تک این خصوصیات را بررسی کنیم.

خصوصیت flex-direction

خصوصیت flex-direction تعیین می کند که آیتم های درونش چطور کنار هم قرار بگیرند. برای روشن شدن موضوع چند مثال برای شما آورده ایم:

مثال اول – مقدار column آیتم ها را به صورت عمودی روی هم قرار می دهد:

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

مثال دوم- مقدار column-reverse آیتم ها را به صورت عمودی روی هم قرار می دهد اما به صورت برعکس (از آیتم آخر به اول):

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

مثال سوم – مقدار row آیتم ها را به صورت افقی کنار هم قرار می دهد:

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

مثال چهارم – مقدار row-reverse آیتم ها را به صورت افقی کنار هم قرار می دهد اما به صورت برعکس (از آیتم آخر به اول):

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

خصوصیت flex-wrap

خصوصیت flex-wrap می گوید که آیا آیتم های Flexbox هنگام رسیدن به پایان عرض صفحه به خط بعدی منتقل شوند و یا اندازه شان کوچک تر شود تا همگی در یک خط و کنار هم قرار بگیرند. برای درک بهتر این خصوصیت چند مثال برایتان آورده ایم. سعی کنید در هر خروجی، اندازه ی مرورگر را کوچک تر و بزرگ تر کنید (خط وسط صفحه در JSBin) تا رفتار آیتم ها را ببینید.

مثال اول – مقدار wrap آیتم ها را wrap می کند (با رسیدن به عرض صفحه، به خط بعد منتقل می شوند):

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

مثال دوم – مقدار nowrap آیتم ها را wrap نمی کند (آیتم ها کوچک می شوند تا در یک خط جا شوند):

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

مثال سوم – مقدار wrap-reverse آیتم ها را wrap می کند (با رسیدن به عرض صفحه، به خط بعد منتقل می شوند) اما به صورت برعکس (از آیتم آخ به اول):

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

خصوصیت flex-flow

این خصوصیت یک دستور خلاصه برای خصوصیت های flex-direction و flex-wrap می باشد. به مثال های زیر توجه کنید:

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

خصوصیت justify-content

خصوصیت justify-content برای ترازبندی آیتم های Flexbox استفاده می شود و مقادیر مختلفی می گیرد. من برای هر کدام از مقادیر دریافتی این خصوصیت یک مثال آورده ام:

مثال اول – مقدار center که آیتم ها را در وسط صفحه قرار می دهد:

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

مثال دوم – مقدار flex-start که مقدار پیش فرض است و آیتم ها را در ابتدای نگهدارنده قرار می دهد:

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

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

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

مثال چهارم – مقدار space-around که قبل، بعد و بین آیتم ها فضای خالی قرار می دهد:

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

مثال پنجم – مقدار space-between که تنها بین آیتم ها فضای خالی قرار می دهد (نه قبل و بعدشان):

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

خصوصیت align-items

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

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

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

مثال دوم – مقدار flex-start که آیتم ها را در بالای نگهدارنده قرار می دهد (شروع در محور عمودی، بالا است):

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

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

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

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

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

مثال پنجم – مقدار baseline که آیتم ها را بر اساس baseline متنی شان ترازبندی می کند:

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

نکته: Baseline متنی یعنی پایین ترین نقطه ی متن داخل یک آیتم. به تصویر زیر نگاه کنید تا مفهوم Baseline متنی برایتان روشن شود:

مفهوم Baseline متنی
مفهوم Baseline متنی

در این تصویر خط قرمز، baseline متنی را مشخص می کند؛ یعنی پایین ترین قسمت متنِ آیتم ها بدون توجه به شکل آیتم.

امیدوارم از این قسمت لذت برده باشید. در قسمت بعدی خصوصیات دیگر مدل Flexbox را بررسی خواهیم کرد.

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

ارسال نظر

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

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