آموزش FlexBox (فلکس باکس) در CSS کامل و رایگان

یکی از محبوب ترین تکنیک های طراحی وب در سال های اخیر فلکس باکس FlexBox در css بوده است که در آموزش FlexBox (فلکس باکس) در CSS کامل و رایگان به صورت کامل در رابطه با این تکنیک صحبت و آموزش ساده و روانی را به شما عزیزان ارائه خواهم داد.

فلکس باکس یا FlexBox چیست؟

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

چرا باید آموزش FlexBox را جدی بگیریم؟

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

دستورات فلکس باکس ( FlexBox Cheatsheet )

نام دستورتوضیحات دستور
Flex Containerاز این به اصطلاح دستور به عنوان مادر فلکس استفاده می شود
Display Flexپیش فرض Display را از بلاک به فلکس تغییر می دهد تا المان ها در کنار یکدیگر قرار گیرند
Flex Directionجهت چینش Display Flex را از چپ به راست یا بالعکس و از بالا به پایین یا بالعکس مشخص می کند
Flex Wrapاین دستور مشخص کننده این است که همه بلاک ها باید در یک سطر قرار بگیرند یا چندتایی
Flex Flowبا این دستور می توان مقدار دو دستور بالا را به ترتیب برای خلاصه نویسی بنویسید
Justify Contentبه جهت ترازبندی استفاده می شود که شیوه هایی چون وسطچین و … را در خود کامل دارد
Align Contentترازبندی عمودی را مشخص می کند و شیوه هایی مختلفی را پشتیبانی می کند
Align Itemsبه جهت ترازبندی مورد استفاده قرار می گیرد و شبیه به Justify Content می باشد
Flex Itemفرزندان یک باکس فلکس را شامل می شود ( شامل آیتم های زیر مجموعه فلکس مادر )
Orderمی توان اولویت نمایش را با این دستور مشخص کرد
Flex Growبرای مشخص کردن میزان عرض یک آیتم به نسبت بقیه
Flex Shrinkبرای میزان حجم آیتم در زمان کوچک شدن به نسبت دیگر آیتم ها
Flex Basisخاصیت حداقل عرض یا ارتفاع با توجه به ستونی یا ردیفی بودن را مشخص می کند
Flexبرای خواص flex-grow ، flex-shrink و flex-basis خلاصه نویسی نمایید
Align Selfیه تنهایی شیوه ترازبدی یک آیتم را مشخص می نمایید
FlexBox CheatSheet | دستورات فلکس باکس

دستور Flex Container

از Container برای نگهداری المان ها استفاده می شود مثل CSS Grid ، در فلکس باکس یک المان مادر یا نگهدارنده با نام Flex-Container داریم که البته می تونید به نام های دیگری هم استفاده کنید و لزومی ندارد اما بهتر است کدی که می نویسیم توسط دیگران و خودمان راحت تر خوانده شود:

.flex-container {
    display: flex;
}

مورد بالا را به جهت شروع در نظر می گیریم و در ادامه با دستورات سی اس اس FlexBox آشنا خواهید شد.

دستورات اصلی فلکس باکس برای نگهدارنده یا همان Container

مجموعه ای از دستورات تعریف شده انده که بتوانید در شرایط و نیازهای مختلف خود از آن استفاده کنید تا به خروجی نهایی خود برسید:

  • Display
  • Flex Direction
  • Flex Wrap
  • Flex Flow
  • Justify Content
  • Align Content
  • Align Items

در ادامه آموزش به خاصیت و ویژگی های هر کدام از دستورات بالا خواهیم پرداخت.

دستور Display

به صورت پیش فرض المان های DIV صفحه خاصیت Display آن ها بر روی Block تنظیم شده که در این حالت از اولین دستوری که برای نگهدارنده خود می بایست استفاده کنیم Display هست که باید بر روی Flex تنظیم شود تا اولین و مهمترین دستور سی اس اس فلکس باکس را استفاده کرده باشیم.

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

دستور Flex Direction

جهت چینش المان ها در سی اس اس فلکس باکس را دستور Flex Direction تنظیم می کند و به همین منظور شما می توانید چنیش المان های زیر مجموعه نگهدارنده خود را در دو شکل ستونی یا ردیفی تنظیم نمایید.

در اصل نگهدارنده یا همان Container ما در دو محور می تواند چینش را برای ما انجام دهد:

  1. محور اصلی یا Main Axis
  2. محور متقاطع یا Cross Axis
آموزش فلکس باکس Main axis و Cross axis
آموزش FlexBox

شما برای دستور Flex Direction می توانید از دو مقدار Column برای ستونی و چینش عمودی و از مقدار Row برای چینش افقی یا ردیفی استفاده نمایید و دقت نمایید در صورتی که از فلکس دایرکشن استفاده نکنید و اون رو فراخوانی نخوانید به صورت پیش فرض روی Row تنظیم شده است.

دستور Flex Wrap

دستور Flex Flow

دستور Justify Content

دستور Align Content

دستور Align Items

ابزارهای فلکس باکس آنلاین

ابزارهای متنوعی برای کار با دستورات فلکس وجود دارد که برای تازه کاران یا افرادی که میخواهند تمرین کنند و برای آموزش FlexBox از این ابزارها استفاده نمایند بسیار مناسب است، که سعی کردیم بهترین ها را برایتان در اینجا لیست کنیم. با استفاده از ابزار های زیر خیلی سریع و ساده می توانید به ترکیب دلخواه تولید شده کدهای فلکس باکس خود دست پیدا کنید.

فریم ورک های FlexBox Css

در این قسمت فریم ورک هایی که از سیستم فلکس باکس استفاده می کنند برای چینش صفحات و ریسپانسیو خود و یا از دستورات FlexBox پشتیبانی می کنند را به شما معرفی می کنیم تا در صورت نیاز بتوانید از این ابزارها و فریم ورک ها استفاده نمایید.

نتیجه گیری استفاده فلکس باکس

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

آموزش FlexBox
5/5 - (3 امتیاز)
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها