اصول و مبانی Flexbox برای مبتدیان

Flexbox یا Flexible box یک ماژول صفحه بندی یک بعدی است که به شما امکان می‌دهد بدون در نظر گرفتن اندازه‌ها، طرح‌هایی را بسازید و بین آیتم‌های فلکس داخل کانتینر فلکس ترازبندی و توزیع کنید. همچنین از flexbox برای ساخت طرح بندی در مقیاس کوچک و نیز برای توزیع فضا بین اجزای مختلف استفاده می‌شود. توجه داشته باشید که برای طرح‌بندی در مقیاس بزرگ باید از Grid استفاده کنید. در حال حاضر ترکیب گرید و flexbox بسیار قدرتمند شده است، زیرا با بهره‌گیری از گرید می‌توانید هر طرح پیچیده‌ای را به راحتی اجرا کنید در حالی که با flexbox تنها می‌توان طرح‌بندی‌های ساده‌ای ایجاد کرد و از آن برای ترازبندی موارد مختلف استفاده کرد.

به علاوه flexbox به راحتی مشکل چیدمان ساختار را حل می‌کند، در حالی که قبل از وجود flexbox باید چیدمان‌هایی را با جداول می‌ساختیم و با خصوصیات css به آن استایل می‌دادیم، چیزی که برای ساخت چیدمان مناسب نبود و برای طراح کاملا دردناک و آزاردهنده تلقی می‌شد. به عنوان مثال مجبور بودیم از روش‌هایی مانند clear fix و غیره استفاده کنیم.

از flexbox می‌توان برای موارد زیر استفاده کرد:

ایجاد منو و navbar
ستون‌های یکسان
تراز کردن ورودی و دکمه در یک ردیف
و موارد بیشتر

Flexbox Core

قبل از اطلاع از همه خصوصیاتی که در flexbox وجود دارد، باید عملکرد اصلی آن را یاد بگیریم تا تمام ویژگی‌هایی که استفاده می‌کنیم کاملا منطقی باشد و بتوانیم هنگام استفاده از flexbox تصمیمات بهتری بگیریم. بنابراین نگاهی به تصویر زیر بیندازید و بعد از آن مفصل هر کدام از آنها را توضیح خواهیم داد.

محور اصلی (main-axis) به طور پیش فرض که به صورت فلش یا پیکان مشخص شده به سمت راست است اما می‌توان جهت فلش را به سمت چپ، پایین و بالا با مقادیر flex-direction تغییر داد.

main-start و main-end- جایی است که آیتم‌های فلکس از ابتدا تا انتها قرار می‌گیرند و نحوه قرارگیری آیتم‌های فلکس بر اساس مقدار flex-direction تغییر می‌کند. هنگامی که flex-direction: row; باشد، آیتم‌ها به طور پیش فرض از چپ به راست به صورت افقی قرار می‌گیرند. در این حالت فلش محور اصلی به سمت راست قرار می‌گیرد. و هنگامی که flex-direction: row-reverse; باشد، آیتم‌های فلکس از راست به چپ به صورت افقی قرار می‌گیرند و فلش محور اصلی در به سمت چپ اشاره می‌کند. زمانی که flex-direction: column; باشد، آیتم‌های فلکس از بالا به پایین به صورت عمودی قرار می‌گیرند. در این حالت فلش محور اصلی به پایین اشاره می‌کند. و زمانی که flex-direction: column-reverse; باشد، آیتم‌های فلکس از پایین به بالا به صورت عمودی قرار می‌گیرند و در آن حالت فلش محور اصلی رو به بالا است.

main-size - عرض و ارتفاع آیتم‌های فلکس بر اساس جهت محور اصلی را مشخص می‌کند.

cross-axis - می‌تواند به عنوان یک پیکان در نظر گرفته شود و به طور پیش فرض رو به پایین نشان داده می‌شود. اما هنگامی که flex-direction: column or column-reverse; باشد، جهت آن به سمت راست تغییر می‌کند.

cross-start و cross-end- نحوه قرارگیری آیتم‌های فلکس در داخل کانتینر است. فلش cross-axis به طور پیش فرض رو به پایین است و در این حالت آیتم‌های فلکس از cross-start تا cross-end به صورت عمودی قرار می‌گیرند که جهت آن از بالا به پایین است، اما جهت cross-axis در حالت flex-direction: column; تغییر می‌کند. در این حالت آیتم‌های فلکس از چپ به راست به صورت افقی قرار می‌گیرند.

cross-size - عرض و ارتفاع آیتم‌های فلکس بر اساس جهت cross-axis است.

flex-container - زمانی است که عنصر HTML خصوصیت display آن بر روی flex تنظیم شده است، در نتیجه تبدیل به کانتینر برای آیتم فلکس می‌شود. توجه کنید در این حالت آیتم فلکس می‌تواند یک کانتینر فلکس باشد.

flex-item - هنگامی که خصوصیت display والد آن روی flex تنظیم شود، یک آیتم فلکس است.

خصوصیات Flex Container

انواع خاصی از ویژگی‌ها وجود دارد که فقط در کانتینرهای فلکس موجود است و می‌تواند تنها روی خود آیتم فلکس اعمال شود. در این بخش تمام خصوصیات اصلی کانتینر فلکس را یاد می‌گیرید.

Justify Content

justify-content تمام آیتم‌های فلکس را روی main-axis حرکت می‌دهد و در تصویر زیر می‌بینید که justify-content چگونه آیتم‌های فلکس را روی محور اصلی حرکت می‌دهد و دارای چه مقادیری است.

flex-start - همه آیتم‌های فلکس را به main-start کانتینر فلکس منتقل می‌کند. صرف نظر از اینکه فلش محور اصلی به کدام سمت نشان می‌دهد، آیتم‌های فلکس همیشه قبل از سایر مقادیر در main-start کانتینر قرار می‌گیرند قبل از اینکه مقادیر دیگر در justify-content استفاده شوند.
flex-end - همه آیتم‌های فلکس را به main-end کانتینر فلکس منتقل می‌کند و بر اساس مکانی که فلش محور اصلی به آن اشاره می‌کند، می‌توان آیتم‌های فلکس را در سمت راست، سمت چپ، قسمت بالای آن و سمت پایین کانتینر فلکس قرار داد.
center - همه آیتم‌های فلکس را به مرکز main-axis منتقل می‌کند.

space-between - فضای مساوی را در بین آیتم‌های فلکس ایجاد می‌کند، اما فضایی در main-start و main-end آن ایجاد نمی‌کند.

space-around - فضای مساوی بین آیتم‌های flexbox و نیمی از فضای main-start و main-end آنها ایجاد می‌کند.

space-evenly - فضای یکسانی را هم در بین آیتم‌های فلکس و هم در main-start و main-end ایجاد می‌کند.

Align Items

align-items آیتم‌های فلکس را در cross-axis حرکت می‌دهد. همانطور که گفتیم اگر flex-direction: row or row-reverse; باشد، آیتم‌های فلکس به صورت عمودی از بالا به پایین در کانتینر قرار می‌گیرند. اما اگر flex-direction: column or column-reverse باشد، آیتم‌های فلکس به صورت افقی از چپ به راست قرار می‌گیرند. مقادیر کمی که با استفاده از آنها می‌توانیم آیتم‌های فلکس را در main-axis تراز کنیم. برای داشتن یک تصویر ذهنی از نحوه کارکرد align-items به تصویر زیر نگاه کنید.

stretch - مقدار پیش فرضی است که در آن آیتم‌های فلکس فضای موجود را در cross-axis اشغال می‌کنند.
flex-start - همه آیتم‌های فلکس را به سمت cross-start محور عرضی حرکت می‌دهد.
flex-end - همه آیتم‌های فلکس را به سمت cross-end محور عرضی منتقل می‌کند.
center - آیتم‌های فلکس را به مرکز محور عرضی منتقل می‌کند.
baseline - پایین همه محتوای آیتم‌های فلکس را به همان خط منتقل می‌کند. این امر به ویژه هنگامی مفید است که یکی از آیتم‌های فلکس بزرگتر از سایر آیتم‌ها باشد. بنابراین برای قرار دادن آنها در یک خط از این مقدار استفاده می‌کنیم.

در مرکز قرار دادن با استفاده از Justify Content و Align Content

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

    .container {
        display: flex;
        justify-content: center;
        align-items: center;
    }

Flex Wrap

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

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

Flex Direction

Flex-direction جهت محور اصلی را تغییر می‌دهد (فلش پیش فرض محور اصلی به سمت راست نشان می‌دهد). برای ایجاد تصویری ذهنی از نحوه کار این خصوصیت، به تصویر زیر مراجعه کنید.

row - پیش فرض است و در این حالت پیکان محور اصلی به سمت راست نشان می‌دهد.
row-reverse - جهت محور اصلی را تغییر می‌دهد تا آن را به سمت چپ نشان دهد.
column - فلش محور اصلی را به پایین نشان می‌دهد.
column-reverse - نقاط فلش محور اصلی را به بالا تنظیم می‌کند.

توجه 1: در flex-direction: column or column-reverse وقتی عرض آیتم فلکس به عرض flex-basis تنظیم می‌شود، هنگامی که مقادیر فوق الذکر برای flex-direction انجام شود نتیجه این است که مقدار اعلام شده در flex-basis به ارتفاع آیتم فلکس اعمال می‌شود.
توجه 2: این فقط برای flex-basis اعمال می‌شود نه برای سایر واحدهای اندازه گیری.

Flex Flow

flex-flow راهی برای تعریف flex-direction و flex-wrap در یک اعلان واحد است که از نظر من روش جالبی است و به صورت زیر تعریف می‌شود.

 .container {
        display: flex;
        flex-flow: row wrap;
    }

Align Content

align-content دارای مقادیر مشابه justify-content است. اما این تنها زمانی کار می‌کند که "flex-wrap wrap یا wrap-reverse" بر روی کانتینر فلکس اعمال شود و همچنین هنگامی که بیش از یک خط از آیتم‌های فلکس وجود دارد و برای جابجایی آنها در محور عرضی استفاده می‌شود. نگاهی به تصویر زیر بیاندازید تا نحوه کار آن را درک کنید.

stretch - مقدار پیش فرضی است که در آن تمام آیتم‌های فلکس فضای موجود را در محورهای عرضی اشغال می‌کنند.
flex-start – دسته‌ای از آیتم‌های فلکس را به cross-start کانتینر فلکس منتقل می‌کند.
flex-end - همه آیتم‌های فلکس را به cross-end کانتینر فلکس منتقل می‌کند.
center - همه آیتم‌های فلکس را به مرکز cross-axis منتقل می‌کند.
space-between - فضای مساوی را در بین آیتم‌های فلکس ایجاد می‌کند اما در cross-start و cross-end آیتم‌های فلکس فضای خالی ایجاد نمی‌کند.
space-around - فضای مساوی بین آیتم‌های flexbox و نیمی از فضای cross-start و cross-end آیتم‌های فلکس ایجاد می‌کند.
space-evenly - فضای مساوی را هم در بین آیتم‌های فلکس و هم در cross-start و cross-end آیتم‌های فلکس ایجاد می‌کند.

توجه: fistline:: و firstletter:: روی کانتینرهای فلکس کار نمی‌کنند.

خصوصیات Flex Item

Align Self

align-self اگر مقدار آن روی عنصر اصلی تنظیم شود یا حتی اگر اعمال نشود، مقدار اعلام شده را لغو می‌کند. این مورد آیتم فلکس تکی را که در محور عرضی کانتینر استفاده می‌شود حرکت می‌دهد. و تمام مقادیر موجود در align-item نیز برای همان align-self اعمال می‌شوند. به تصویر زیر نگاهی بیندازید تا یک درک کلی برای این خصوصیت داشته باشید.

Flex Grow

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

Flex Shrink

flex-shrink هم فقط عددهای صحیح مثبت را می‌پذیرد و مانند flex-grow کار می‌کند. با این تفاوت که به جای افزایش، باعث کاهش آیتم‌های فلکس می‌گردد. هرچه مقدار flex-shrink در آیتم‌های فلکس بیشتر باشد، سریعتر کوچک می‌شود (نسبت به آیتم‌های فلکس هم سطحش).

Flex Basis

flex-basis عرض شروع آیتم‌های فلکس را تعریف می‌کند. این بدان معناست که قبل از کوچک شدن viewport، عرض آیتم فلکس همان چیزی خواهد بود که در flex-basis تعریف شده است. اما با کوچکتر شدن viewport، کوچک می‌شود.

Flex

flex خصوصیتی جالب است که به عنوان یک اختصار برای تعریف flex-grow | flex-shrink | flex-base در یک اعلان واحد به کار می‌رود. و به طور پیش فرض مقادیر در flex بر روی flex: 1 0 auto تنظیم می‌شوند. استفاده از flex-shrink | flex-base یک گزینه اختیاری است اما شما باید یک flex-grow در آن داشته باشید.

پیشنهاد می‌شود به جای تنظیم آن 3 خصوصیت به صورت جداگانه، از این خصوصیت مختصر استفاده کنید. همانطور که flex می‌تواند خصوصیات دیگر را به صورت هوشمند تنظیم کند.

Order

order فقط عدد صحیح می‌پذیرد و ترتیب آیتم‌های فلکس را تغییر می‌دهد که در آن آیتم‌هایی که ارزش کمتری در خصوصیت order شان دارند، قبل از آیتم‌های دیگر قرار می‌گیرند که ارزش بیشتری روی خصوصیت order خود دارند. مقدار order پیش فرض در همه آیتم‌های فلکس 0 است که در order منبع کانتینر قرار دارند.

توجه: float، clear و vertical-align روی آیتم‌های فلکس کار نمی‌کنند.

پشتیبانی مرورگرها

می‌توانید پشتیبانی مرورگر را برای flexbox و خصوصیات آن در این وب سایت بررسی کنید. اگر مرورگر مد نظرتان از خصوصیات flexbox خاصی پشتیبانی نمی‌کند، پیشوندهای vendor آن را نیز امتحان کنید. در زیر چند پیشوند وندر برای مثال آورده شده است.

iOS: -webkit-
Safari: -webkit-
Firefox: -moz-
Chrome: -webkit-
Opera: -o-
Internet Explorer & Microsoft Edge: -ms-

 .container {
        -webkit-display: flex;
        -moz-display: flex;
        -ms-display: flex;
        -o-display: flex;
        display: flex;
    }

پروژه‌هایی که باید بسازید

شما اکنون چیزهای زیادی در مورد نحوه کارکرد flexbox یاد گرفته‌اید و حالا وقت آن است آنچه را که آموخته‌اید تمرین کرده تا آن را در مغز خود تقویت و تثبیت کنید. بنابراین توصیه می‌کنیم چند پروژه در زیر ایجاد کرده و بدون اینکه به کد منبع آنها نگاه کنید خودتان را مجبور به انجام آن کارها کنید.