قالب بندی آسان صفحات HTML به کمک flexbox

flex-boxاگر ما جزء افرادی بودیم که قبل از طراحی و پیاده سازی flex box به کار طراحی و کد نویسی قالب مشغول میشدیم احتمالا مزیت این تکنولوژی را بیشتر درک میکردیم . قبل از معرفی و معروف شدن این تکنولوژی برنامه نویسیان صفحات وب معمولا از ویژگی هایی مانند float و position برای طرح بندی و چیدمان صفحات وب استفاده میکردند که علاوه بر سختی هایی که هنگام چیدمان عناصر با آن مواجه میشدند، عمل ریسپانسیو سازی صفحات وب که امروزه اهمیت زیادی دارد را پیچیده می کرد .فلکس باکس یک روش چیدمان تک بعدی برای چیدن عناصر به صورت ردیفی یا ستونی است . CSS Flexible Box Layout که به طور خلاصه flexbox نامیده میشود یک مدل لایه بندی ارائه شده در css3 است . عناصری که در یک عنصر والد با این خاصیت قرار میگیرند میتوانند بسط یابند تا کل عرض یا ارتفاع عنصر را بگیرند و یا کوچک شوند که همگی در یک ردیف یا یک ستون قرار گیرند . این تنها یکی از مزایای flex box است !!برای مثال اگر بخواهیم مثال های زیر را به کمک ویژگی های قدیمی تر css انجام دهیم ممکن است کار دشوار یا حتی غیر ممکنی باشد، در حالی که جزء مزایای flex box محسوب میشود:وسط قرار دادن یک بلوک از محتوا درون والد خود همه فرزندان یک عنصر را صرف نظر از این که چقدر عرض/ارتفاع دارند با هم هم اندازه کنیم (عرض/ ارتفاع)همه ی ستون های یک طرح را بدون در نظر گرفتن این که چقدر محتوا دارند هم ارتفاع کنیم . فلکس باکس چگونه کار میکند؟برای استفاده از flexbox اولین کاری که باید انجام دهیم انتخاب عنصری است که میخواهیم چیدمان فرزندان آن را تنظیم کنیم و دادن ویژگی زیر به آن عنصر است:element { display:flex;}این کد باعث میشود که عنصر element به یک flex container یا به اصطلاح ظرف انعطاف پذیر تبدیل شود و ما میتوانیم فرزندان این عنصر را به صورت عمودی یا افقی و با چیدمان خاصی کنار هم قرار دهیم . flex-containerflex-itemsمحور های اصلی و متقاطع در flex-boxعناصر فرزند عنصر element در امتداد دو محور قرار میگیرند :محورهای تکنولوژی flex-boxمحور اصلی که به آن main axis گفته میشود جهتی است که فرزندان عنصر flex در امتداد آن قرار میگیرند .محور متقاطع که به آن cross axis گفته میشود بر محور اصلی عمود است .عنصر پدر که دارای ویژگی display : flex است به عنوان flex-container شناخته میشود . عناصری که داخل flex-container قرار دارند، flex-item نامیده میشوند . چیدمان عناصر به صورت عمودی و ستونی در flexboxیکی از مهم ترین ویژگی های flexbox امکان چیدن عناصر به صورت ردیفی و ستونی است . به کمک ویژگی flex-direction ما میتوانیم انتخاب کنیم که عناصر به صورت افقی یا عمودی در کنار هم قرار گیرند . flex-direction : column;به صورت پیش فرض مقدار این ویژگی روی row یا ردیف تنظیم شده است . با تغییر این ویژگی ما در واقع جهت محور های اصلی و متقاطع را مشخص میکنیم (main axis و cross axis). در واقع با تنظیم مقدار row محور اصلی افقی و محور متقاطع عمودی است .جهت محور های فلکس باکسو با تنظیم مقدار flex-direction روی column، محور اصلی عمودی و محور متقاطع افقی است .جهت محور های فلکس باکستراز بندی عناصر به صورت افقی و عمودی در flexboxفلکس باکس دو ویژگی بسیار مهم برای تراز بندی کردن عناصر در جهت محور های اصلی و متقاطع دارد .ویژگی align-items : نحوه قرارگیری و چیدمان عناصر روی محور متقاطع را مشخص میکند .مقدار strech : به طور پیش فرض این مقدار را دارد که باعث میشود همه ی آیتم های فرزند در جهت محور متقاطع کشیده شوند . و اگر والد عرض یا ارتفاع ثابتی در جهت محور متقاطع نداشته باشد همه آیتم ها به اندازه طولانی ترین آیتم کشیده می شوند.مقدار center : باعث میشود که آیتم ها اندازه ذاتی خود را حفظ کنند و در امتداد محور متقاطع وسط چین شوند.مقدار flex-start : همه آیتم ها را در ابتدای محور متقاطع قرار میدهد .مقدار flex-end : همه آیتم ها را در ابتدای محور متقاطع قرار میدهد.این ویژگی مقادیر دیگری نیز میپذیرد که از حوصله این مطلب خارج است . مقادیر مختلف ویژگی align-itemsویژگی justify-content : نحوه قرارگیری و چیدمان عناصر روی محور اصلی را مشخص میکند .مقدار flex-start : مقدار پیش فرض است که باعث میشود همه ی موارد در ابتدای محور اصلی قرار گیرند. مقدار flex-end : باعث میشود همه آیتم ها در انتهای محور اصلی قرار گیرند . مقدار center : باعث میشود همه آیتم ها در مرکز محور اصلی قرار گیرند .مقدار space-around : همه ی موارد را در امتداد محور اصلی با فاصله مساوی و کمی فاصله از اطراف آیتم ها قرار میدهد.مقدار space-between : دقیقا شبیه space-around است با این تفاوت که هیچ فاصله ای اطراف آیتم ها قرار نمی دهد.مقادیر مختلف ویژگی justify-contentما در این مقاله به توضیح اجمالی در رابطه با تکنولوژی flexbox پرداختیم . شما میتوانید به کمک منابع زیادی که در اینترنت وجود دارد به آموزش کامل این مبحث مهم و پرکاربرد بپردازید . با آرزوی موفقیت .