مهدی ترکمان
آموزش 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 | یه تنهایی شیوه ترازبدی یک آیتم را مشخص می نمایید |
دستور 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 ما در دو محور می تواند چینش را برای ما انجام دهد:
- محور اصلی یا Main Axis
- محور متقاطع یا Cross Axis
شما برای دستور Flex Direction می توانید از دو مقدار Column برای ستونی و چینش عمودی و از مقدار Row برای چینش افقی یا ردیفی استفاده نمایید و دقت نمایید در صورتی که از فلکس دایرکشن استفاده نکنید و اون رو فراخوانی نخوانید به صورت پیش فرض روی Row تنظیم شده است.
دستور Flex Wrap
دستور Flex Flow
دستور Justify Content
دستور Align Content
دستور Align Items
ابزارهای فلکس باکس آنلاین
ابزارهای متنوعی برای کار با دستورات فلکس وجود دارد که برای تازه کاران یا افرادی که میخواهند تمرین کنند و برای آموزش FlexBox از این ابزارها استفاده نمایند بسیار مناسب است، که سعی کردیم بهترین ها را برایتان در اینجا لیست کنیم. با استفاده از ابزار های زیر خیلی سریع و ساده می توانید به ترکیب دلخواه تولید شده کدهای فلکس باکس خود دست پیدا کنید.
فریم ورک های FlexBox Css
در این قسمت فریم ورک هایی که از سیستم فلکس باکس استفاده می کنند برای چینش صفحات و ریسپانسیو خود و یا از دستورات FlexBox پشتیبانی می کنند را به شما معرفی می کنیم تا در صورت نیاز بتوانید از این ابزارها و فریم ورک ها استفاده نمایید.
نتیجه گیری استفاده فلکس باکس
اگر بتوانید با استفاده از فریم ورک ها یا ابزارهای معرفی شده از فلکس باکس استفاده کنید قطعا متوجه مزیت ها و سادگی و قدرت این تکنیک طراحی وب خواهید شد اما اگر می خواهید با شخصی ترین حالت دلخواه ممکن سایت خود را طراحی کنید بهتر است این چند دستور فلکس باکس را در همین آموزش FlexBox فرا گرفته و سعی کنید ابتدا چند پروژه تستی بزنید.
