قالب بندی(flexbox) چیست ؟

در فرانت اند وقتی میخواهید چند تا div رو کنار همدیگه بذارید باید از ابزار های پیچیده ای مثل float استفاده کنید ولی کار با این ابزار خیلی سخته و مشکلات جانبی خودش رو داره پس css میاد و یک ماژول جدید طراحی میکنه تا کار ما برای قرار دادن div ها کنار هم به شکل های مختلف رو آسون تر و استاندارد تر میکنه و به شکل عجیبی حجم کد های ما رو کاهش میده . البته flexbox در ریسپانسیو سازی سایت هم کار آمده و هم استاندارد تر و باز هم حجم کد های مارو کاهش میده .

"اگه درمورد سایت ریسپانسیو یا واکنش گرا اطلاعات ندارید مقاله ی زیر را بخوانید"

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

شروع کار با flexbox:

اول از همه باید قالب div اصلی یا نگهدارنده(container) رو تبدیل به flex کنیم که برای این کار فقط لازم هست که دستور زیر را برای div اصلی انجام بدیم:

.container {
 display: flex; /* or inline-flex */
 }

خب حالا میخوایم ابزار کار با flexbox رو برای شما معرفی کنیم :

ابزار flex-direction:

با استفاده از flex-direction میتوانید نحوه ی قرار دهی قالب خودتون رو مشخص کنید که با یکی از دستور های زیر قابل اجرا میباشد :

.container {
 flex-direction: row | row-reverse | column | column-reverse; 
}

• مقدار row : همونطور که در عکس مشاهده میکنید item ها رو در یک ردیف و در جهت اون container قرار میده ، اگه جهت rtl (right to left) باشه item ها از راست به چپ و اگه ltr (left to right) باشه آیتم ها از چپ به راست به ترتیب قرار میگیرند
• مقدار row-reverse : دقیقا همون کار row رو میکنه ولی آیتم ها رو برعکس میچینه
• مقدار column : هم همون کار item ها رو از بالا به پایین و در یک ستون به ترتیب میچینه
• مقدار column-reverse : هم item ها رو از پایین به بالا و دریک ستون مرتب میکنه

ابزار flex-wrap :

به صورت پیش فرض item ها در یک خط قرار میگیرند ولی میتوانید کاری کنید که با کوچکتر شدن container آیتم ها به مکانی دیگر (مثل پایین item های دیگر ) سـُر بخورند که با کد زیر میتوان به این قابلیت دست یافت

container { 
flex-wrap: nowrap | wrap | wrap-reverse; /* default value : nowrap*/ 
}

• مقدار nowrap : مانند شکل اگر container ما کوچکتر از عرض item ها شود item ها از container بیرون میریزند
• مقدار wrap : اگر عرض container از item ها کمتر شود item های سرریزشده در جهت container که به صورت (rtl / ltr ) است به زیر item های دیگر میرود
• مقدار wrap-reverse : دقیقا کار wrap را انجام میدهد ولی جهت جای گذاری item سر ریز شده در آن برععکس مقدار wrap هست .

ابزار flex-flow :

این ابزار خلاصه شده ی ابزار flex-direction و flex-wrap میباشد و به صورت زیر از آن استفاده میشود

.container {
 flex-flow: column wrap , row wrap , ... ;
 }

ابزار justify-content :

این ابزار تنظیم جهت و نحوه ی قرار گیری item ها را برای ما ممکن میسازد و نحوه ی استفاده از فضای آزاد بین item ها را برای ما ممکن میسازد و به صورت زیر از آن استفاده میشود :

.container { 
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe; 
}

این ابزار مقدار های زیادی دارد ولی ما فقط 6 تایه پر استفاده را برای شما شرح میدهیم

• مقدار flex-start : اینجا item ها بدون فضای بازی به از سمت جهت container که به صورت ( rtl /ltr ) است به ترتیب چیده میشوند
• مقدار flex-end : دقیقا کار flex-start را میکند ولی ترتیب را برعکس میکند
• مقدار center : اینجا item ها بدون فضای خالیه بین خودشان در وسط container قرار میگیرند
• مقدار space-between : در این مقدار دو آیتم سمت چپ و راست به اول و آخر container میچسبند ولی فضاهای خالی میان بقیه item ها به صورت مساوی پخش میشود
• مقدار space-around : به اندازه ی یک واحد بین اول و آخر containter با item ها فاصله است ولی به اندازه ی دو واحد بین item ها فاصله است
• مقدار space-evenly : به اندازه یک واحد بین همه ی item ها و اول و آخر container فاصله است

هنوز flexbox ابزار های بسیار بیشتری دارد که میتوانید درباره ی آنها در مقاله ی زیر بیشتر تحقیق کنید و همچنین میتوانید حقه های استفاده flexbox را هم پیدا کنید

و همچنین برای کار بیشتر با flexbox میتوانید دوره ی زیر را ببینید

نویسنده : ارشیا مخلص