ویژگی flex در CSS

یکی از مقادیر ویژگی display، مقدار flex است. مقدار flex المان را اصطلاحا  به یک جعبه منعطف (Flexbox) تبدیل می کند.

Flexbox یک سیستم چیدمان CSS است که به ما اجازه طراحی انعطاف‌پذیر (flexible) و واکنش گرا (responsive) می دهد.

ساختار flex box  به صورت زیر است: 

زمانی که از display: flex; استفاده می کنیم و یک Flexbox ایجاد می کنیم:

• به آن المان محفظه منعطف (flex container)
• و به المان های فرزند درون آن آیتم های منعطف (flex items)

گفته می شود.

container ویژگی‌های محفظه منعطف flex-direction افقی یا عمودی و جهت قرارگیری flex-wrap وضعیت شکستن سرریز flex-flow خلاصه نویسی direction و wrap justify-content چیدمان محور اصلی align-items چیدمان محور فرعی align-content چیدمان بین شکست سرریز‌ها gap فاصله بین آیتم‌های منعطف items ویژگی‌های آیتم‌های منعطف order ترتیب چینش آیتم‌های منعطف flex-basis اندازه پیشفرض آیتم‌های منعطف flex-grow افزایش اندازه آیتم‌های منعطف flex-shrink کاهش اندازه آیتم‌های منعطف flex خلاصه نویسی grow - shrink - basis align-self بازنویسی چینش پیشفرض

محفظه منعطف (flex container) المانی است که ویژگی ;display: flex به آن اعمال شده و روی تمام المان های فرزند درون آن (آیتم های منعطف) تاثیر می گذارد.

ساختار flex container  به صورت زیر است: 

display: flex;

نکته: همانطور که در نمونه کد بالا دیدید، صرفا با اضافه کردن display: flex، چیدمان آیتم های درون آن تغییر پیدا کرد. 

استفاده از مقدار flex این امکان را به شما می‌دهد که از ویژگی های زیر استفاده کنید:

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

ویژگی flex-direction برای تعیین جهت قرارگیری (افقی یا عمودی) آیتم‌ها منعطف به کار می‌رود.

ویژگی flex-direction مشخص می‌کند که آیتم‌ها در امتداد کدام محور اصلی، یعنی در سطر های افقی (row) یا ستون‌های عمودی (column) قرار بگیرند.

ساختار direction به صورت زیر است:

مقادیر ویژگی flex-direction عبارت اند از:

• row: آیتم ها را به صورت سطری، در جهت direction می چیند. (پیشفرض) 
• row-reverse: آیتم ها را به صورت سطری، در خلاف جهت direction می چیند.
• column: آیتم ها را به صورت ستونی، از بالا به پایین می چیند.
• column-reverse: آیتم ها را به صورت ستونی، از پایین به بالا می چیند.

flex-direction: row; /* پیشفرض */
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;

نکته: با انتخاب مقدار row یا row-reverse محور اصلی ما افقی (x) در نظر گرفته می شود.

نکته: با انتخاب مقدار column یا column-reverse محور اصلی ما عمودی (y) در نظر گرفته می شود.

به طور پیش‌فرض، آیتم‌های منعطف همه در یک خط نمایش داده می شوند.

اگر عرض آیتم های منعطف بزرگ تر از محفظه منعطف باشد و به عبارتی سرریز داشته باشند، مقدار سرریز شده در همان خط نمایش و از محفظه منعطف بیرون می زند.

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

مقادیر ویژگی flex-wrap عبارت اند از:

• nowrap: تمام آیتم‌های منعطف در یک خط نمایش داده می شوند. (پیشفرض)
• wrap: آیتم‌های منعطف به خط های بعدی منتقل می‌شوند. (در جهت محور اصلی)
• wrap-reverse: آیتم‌های منعطف به خط های بعدی منتقل می‌شوند. (در خلاف جهت محور اصلی)

flex-wrap: nowrap; /* پیشفرض */
flex-wrap: wrap;
flex-wrap: wrap-reverse;

ویژگی flex-flow خلاصه شده دو ویژگی flex-direction و flex-wrap است.

flex-flow: flex-direction flex-wrap;

flex-flow: column wrap;

ویژگی justify-content، چیدمان آیتم های منعطف را در محور اصلی تعیین می‌کند.

ساختار content به صورت زیر است:

نکته: محور اصلی توسط ویژگی flex-direction تعیین می شود و مقدار پیشفرض آن row است.

مقادیر ویژگی justify-content عبارت اند از:

• flex-start: آیتم‌های منعطف در ابتدا محفظه منعطف چیده می‌شوند.(پیشفرض)
• flex-end: آیتم‌های منعطف در انتها محفظه منعطف چیده می‌شوند.
• center: آیتم‌های منعطف در وسط محفظه منعطف چیده می‌شوند.

flex-direction: row;
justify-content: flex-start; /* پیشفرض */
justify-content: center;
justify-content: flex-end;

flex-direction: column;
justify-content: flex-start; /* پیشفرض */
justify-content: center;
justify-content: flex-end;

نکته: حتما توجه داشته باشید که مقدار flex-start و flex-end چیدمان را از ابتدا و انتها المان شروع می کند. اگر چیدمان المان راست به چپ باشد (direction: rtl;) ابتدای المان سمت راست و انتهای آن سمت چپ می شود. اگر چیدمان المان چپ به راست باشد (direction: ltr;) ابتدای المان سمت چپ و انتهای آن سمت راست می شود. برای درک بهتر نمونه کد زیر را مشاهده کنید.

flex-direction: row;
justify-content: flex-start; /* پیشفرض */
justify-content: center;
justify-content: flex-end;

نکته: بهتر است برای rtl کردن یک وبسایت در تگ html از ویژگی dir استفاده می شود (<html dir="rtl">). برای اطلاعات بیشتر به آموزش چینش متن در CSS مراجعه کنید.

• space-between: آیتم‌ های منعطف با فاصله یکسان نسبت به هم در محفظه منعطف قرار می گیرند.آیتم اول به ابتدا و آیتم آخر به انتها می چسبد.
• space-around: اطراف هر آیتم منعطف فضای برابر قرار می گیرد. فضای آیتم اول به ابتدا و آیتم آخر به انتها، کمتر از فضای بین آیتم ها است.
• space-evenly: فضای بین هر آیتم منعطف برابر است. فضای آیتم اول به ابتدا و آیتم آخر به انتها، نیز برابر فضای بین آیتم ها است.

نکته: برای درک بهتر تفاوت space ها نمونه کد زیر را مشاهده کنید.

flex-direction: row;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;

flex-direction: column;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;

نکته: space-between توسط برخی از نسخه‌های Edge پشتیبانی نمی‌شود، و start - end - left - right هنوز در Chrome وجود ندارد. ایمن ترین و بهترین مقادیر عبارتند از flex-start -  flex-end و center.

ویژگی align-items، چیدمان آیتم های منعطف را در محور فرعی تعیین می‌کند.

ساختار items به صورت زیر است:

نکته: محور اصلی توسط ویژگی flex-direction تعیین می شود. محور فرعی، محور متقاطع بر محور اصلی است.

مقادیر مختلف ویژگی align-items عبارت اند از:

• stretch: آیتم‌ها کشیده می‌شوند تا فضای کامل را پر کنند. (همچنین از min-width و max-width پیروی می‌کند). (پیشفرض)
• flex-start: آیتم‌های منعطف در ابتدا محفظه منعطف چیده می‌شوند.
• flex-end: آیتم‌های منعطف در انتها محفظه منعطف چیده می‌شوند.
• center: آیتم‌های منعطف در وسط محفظه منعطف چیده می‌شوند.
• baseline: آیتم‌ها به گونه‌ای قرار داده می‌شوند که خطوط پایه آن‌ها، هم‌خط شوند.

flex-direction: row;
align-items: stretch; /* پیشفرض */
align-items: flex-start;
align-items: center;
align-items: flex-end;
align-items: baseline;

flex-direction: column;
align-items: stretch; /* پیشفرض */
align-items: flex-start;
align-items: center;
align-items: flex-end;
align-items: baseline;

ویژگی align-content، چیدمان بین خط های محور فرعی تعیین می‌کند.

ساختار align-content به صورت زیر است:

نکته: ویژگی align-items، چیدمان کلی در محور فرعی تعیین می‌کند.

برای استفاده از ویژگی align-content باید:

1. باید ویژگی flex-wrap دارای مقدار wrap یا wrap-reverse باشد.
2. باید حتما wrap رخ دهد یا به عبارتی محتوای ما چند خطی شود.

نکته: در واقع align-content چیدمان فضای بین wrap ها را مدیریت می کند.

 مقادیر ویژگی align-content عبارت اند از:

• normal: خط ها در موقعیت پیش‌فرض خود چیده می‌شوند. (پیشفرض)
• flex-start: خط ها در ابتدا محفظه منعطف چیده می‌شوند.
• flex-end: خط ها در انتها محفظه منعطف چیده می‌شوند.
• center: خط ها در وسط محفظه منعطف چیده می‌شوند.
• space-between: خط ها با فاصله یکسان نسبت به هم در محفظه منعطف قرار می گیرند.آیتم اول به ابتدا و آیتم آخر به انتها می چسبد.
• space-around: اطراف هر خط فضای برابر قرار می گیرد. فضای خط اول به ابتدا و خط آخر به انتها، کمتر از فضای بین خط ها است.
• space-evenly: فضای بین هر خط برابر است. فضای خط اول به ابتدا و خط آخر به انتها، نیز برابر فضای بین خط ها است.
• stretch: خطوط کشیده می‌شوند تا کل فضا را پر کنند.

flex-direction: row;
align-content: normal; /* پیشفرض */
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: space-evenly;

flex-direction: column;
align-content: normal; /* پیشفرض */
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: space-evenly;

ویژگی gap، فاصله‌ بین آیتم‌ های منعطف را ایجاد می‌کند. 

ساختارgap به صورت زیر است:

این ویژگی شامل:

• row-gap: مشخص کردن فاصله بین سطرها

row-gap: 40px; /* فاصله بین سطر ها */

• column-gap: مشخص کردن فاصله بین ستون ها

column-gap: 10px; /* فاصله بین ستون ها */

• gap: خلاصه نویسی ویژگی row-gap و column-gap

gap: 40px 10px; /* خلاصه نویسی */

برای خلاصه نویسی می توان از یک مقدار هم استفاده کرد 

gap: 40px;
 /* row-gap: 40px; */
 /* column-gap: 40px; */

gap: 40px 10px;
/* or */
row-gap: 40px;
column-gap: 10px;

نکته: ویژگی های بالا، در المان محفظه منعطف نوشته می شوند.

نکته: ویژگی های زیر، در آیتم های منعطف نوشته می شوند.

به المان های داخل محفظه منعطف، آیتم‌ های منعطف (flex items) گفته می شود.

ساختار flex items  به صورت زیر است: 

آیتم های منعطف می توانند از ویژگی‌های زیر استفاده کنند:

ویژگی‌های آیتم‌های منعطف order ترتیب چینش آیتم های منعطف را مشخص می کند. flex-basis اندازه پیشفرض آیتم منعطف قبل از تقسیم فضا توسط محفظه منعطف را مشخص می کند. flex-grow اندازه آیتم های منعطف را افزایش می دهد. flex-shrink اندازه آیتم های منعطف را کاهش می دهد. flex خلاصه نویسی grow - shrink - basis align-self بازنویسی چینش پیشفرض یا مشخص شده توسط align-items را انجام می دهد.

ویژگی order، ترتیب پیش‌فرض آیتم‌های منعطف (که بر اساس چینش تگ های html است) را تغییر می دهد.

ساختار order به صورت زیر است: 

نکته: مقدار پیش‎فرض ویژگی order مقدار 0 است. که در این حالت آیتم های منعطف بر اساس چینش تگ html قرار می گیرند.

نکته: ویژگی order مقدار منفی دریافت نمی کند.

آیتم های منعطف بر اساس مقدار کم به زیاد ویژگی order مرتب می شوند. اگر المانی مقدار نداشته باشد مقدار آن 0 در نظر گرفته می شود.

order: 3; /* مقدار پیشفرض 0 است */

نکته: اگر دو یا چند آیتم منعطف دارای مقدار order یکسان باشند. در کنار هم و بر اساس اولویت چینش المان html مرتب می شوند.

ویژگی flex-basis، اندازه پیشفرض آیتم منعطف قبل از تقسیم فضا توسط محفظه منعطف را مشخص می کند.

ویژگی flex-basis مقدار عددی (مانند 10٪، 20px، و ...) و auto دریافت می کند.

نکته: مقدار پیش‎فرض ویژگی flex-basis مقدار auto است.

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

flex-basis: auto; /* مقدار پیشفرض auto */
flex-basis: 50px;
flex-basis: 25%;

ویژگی flex-grow، اندازه یک آیتم را افزایش می دهد.

ساختار grow به صورت زیر است:

ویژگی flex-grow، یک مقدار عددی بدون واحد دریافت می کند.

نکته: مقدار پیش‎فرض ویژگی flex-grow مقدار 0 است.

اگر به همه آیتم های منعطف مقدار 1 بدهیم. همه  به اندازه مساوی فضا می گیرند.

اگر به یک آیتم منعطف، مقدار 2 بدهیم و به بقیه آیتم های منعطف، مقدار 1 بدهیم. اندازه آن آیتم منعطف دو برابر بقیه آیتم های منعطف می شود.

flex-grow: 2; /* مقدار پیشفرض 0 است */

نکته: ویژگی flex-grow مقدار منفی دریافت نمی کند.

اگر از flex-grow به همراه flex-basis استفاده کنیم:

• اگر فضای خالی در محفظه منعطف وجود داشته باشد، flex-basis نادیده گرفته می شود و آیتم منعطف به حدی گسترش پیدا می کند تا کل محفظه منعطف را بپوشاند.
• اگر فضای خالی در محفظه منعطف وجود نداشته باشد، flex-grow هیچ تاثیری روی آیتم منعطف نمی گذارد.

برای درک بهتر، نمونه کد زیر را مشاهده کنید.

flex-grow: 1;
flex-basis: auto;
flex-basis: 50px;
flex-basis: 25%;

ویژگی flex-shrink، اندازه یک آیتم را کاهش می دهد.

ویژگی flex-shrink، یک مقدار عددی بدون واحد دریافت می کند.

نکته: مقدار پیش‎فرض ویژگی flex-shrink مقدار 1 است.

نکته: ویژگی flex-shrink عملکرد بالعکس ویژگی flex-grow دارد.

برای استفاده از ویژگی flex-shrink، حتما آیتم های منعطف باید دارای یک عرض پایه (flex-basis یا width) باشند، تا نسبت به آن عرض پایه کاهش یابند.

flex-shrink: 2; /* مقدار پیشفرض 1 است */

نکته: ویژگی flex-shrink مقدار منفی دریافت نمی کند.

ویژگی flex، خلاصه نویسی سه ویژگی flex-basis، flex-shrink، flex-grow است.

flex: flex-grow flex-shrink flex-basis;
flex: 0 1 auto; /* مقادیر پیشفرض */

نکته: پارامتر اول ویژگی flex اجباری و پارامتر دوم و سوم، اختیاری است.

flex: 1;