خب تو این بخش میخوایم به اموزش فلکس باکس پیشرفته بپردازیم:
در ابتدا میخوام یه نکته ای رو در مورد بخش قبلی یعنی مقاله فلکس باکس بخش مقدماتی بگم،اگر جایی خواستید که از ویژگی های flex-direction و flex-wrap باهم استفاده کنید یک ویژگی وجود داره که کد های ما رو کوتا تر میکنه:
Flex-flow
این ویژگی مقدار های flex-direction و flex-wrap را به ترتیب میگیرد و کمک به کم کردن کد های ما میکنه.
.container {
flex-flow: column wrap;
}
خب بریم سراغ ویژگی بعدی مقاله مون یعنی فلکس باکس پیشرفته که align-content هستش.
Align-content
اگه بخوام ساده بگم این ویژگی نسخه عمودی justify-content هستش و میاد و موارد ما رو به صورت عمود ترازبندی میکنه و در بیشتر از یک ردیف کاربرد داره.
مثلاً اگه تو justify-content وقتی ما space-around میدادیم موارد ما از به صورت افقی که چیده شدند از هم به طور مساوی فاصله میگرفتند ولی موارد اول و آخر با دیورا ظرف فاصلشون نصف بود حالا اگه توی align-content این مقدار رو بدیم خط های ما به صورت عمود از هم فاصله میگیرن و از بالا و پایین فاصله با موارد نصف میشه ولی فاصله بین خط ها مساوی میشه.
برای فهمیدن بهتر بعد از گفتن ویژگی ها عکسی میزارم که راحت درک کنید این ویژگی رو.
این ویژگی مثل justify-content شش مقدار میگیره:
normal (پیش فرض): موارد در موقعیت پیش فرض خود قرار می گیرند گویا هیچ مقداری تنظیم نشده است.
Flex-start : این ویژگی میاد موارد ما رو که در چند ردیف هستند رو از بالا و ابتدای خط ترازبندی میکنه.
Flex-end : این مقدار شبیه قبلی عمل میکنه با این تفاوت که موارد رو از پایین و ازانتهای خط ترازبندی میکنه.
Center : موارد رو وسط چین میکنه و در مرکز ظرف در وضعیت عمود قرار میده.
space-between : موارد با فا صله مساوی از همدیگر توزیع میشن به طوریکه ردیف اول در ابتدای ظرف است و ردیف آخر در انتهای اون قرار داره.
Space-around : موارد به طور مساوی با فضای برابر در اطراف هر خط توزیع می شوند.
Stretch : در این ویژگی موارد کشیده می شوند تا فضای باقیمانده را اشغال کنند و هم ارتفاع با ظرف خود شوند.
.container {
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch ;
}
مثال:
جواب:
مثال های ترکیبی:
Order
به طور پیش فرض ، موارد فلکس به ترتیب منبع ارائه می شوند. با این حال ، خاصیت order ترتیب قرار گرفتن آنها در ظرف فلکس را کنترل می کند.مقدار پشفرض اون صفره و ما میتونیم با عدد دادن به اون ترتیب قرار گیری موارد رو مشخص کنیم. البته اگه فقط به یکی از اجزای ظرف این ویژگی رو بدیم اون میره و آخر همه قرار میگیره اما اگه به همه این ویژگی رو بدیم میتونیم اون ها رو بطور دلخواه مرتب کنیم.
.item {
order: 1; /* default is 0 */
}
برای انجام دادن این مثال ها به سایت flexboxfroggy.com مراجعه نمایید.
مثال:
جواب:
Flex-grow
این ویژگی مقدار بزرگ شدن موارد را تعیین میکند .مقدار آن به طور پیشفرض صفر است . اگر مقدار یکی از موارد را تغییر بدهیم مثلاً 1 بگذاریم در صورتی که ظرف ما فضای خالی داشته باشد اون مورد که بهش مقدار داده شده به قدری بزرگ میشه که فضای خالی باقی نماند.یا اگر تمام موارد 1 باشد یکی از انها را 2 کنیم انداره ان دو برابر بقیه موارد میشود.
.item {
flex-grow: 1; /* default 0 */
}
Flex-shrink
این ویژگی مورد فلکس رو نسبت به بقیه موارد متمایز میکند مقدار پیشفرض اون 1 هستش اگر مقدارش 1 باشه اندازش با بقیه موارد یکسان است ولی اگر صفر باشد دو برابر اندازه ی بقیه موارد داخل ظرف است که مقدارشان 1 است و اگر مقدارش بیشتر از 1 باشد اندازه اش کوچک تر از موارد 1 میشود .
.item {
flex-shrink: 0; /* default 1 */
}
Flex-basis
این ویژگی به شما این امکان را میدهد که به موارد خود طول و عرض (width;height) بدهید.
.item {
flex-basis: | auto; /* default auto */
}
Align-self
تا الان فهمیدید که برای جابه جایی به صورت عمود باید از align-items استفاده کنید حال اگر بخواهیم تنها یک مورد از ظرف فلکس خود را انتخاب کنیم و جا به جا کنیم چطور؟
شما می توانید با align-self این کار را انجام دهید.این ویژگی مقدارش به طور پیشفرض auto می باشد.align-self همان مقادیر align-items را میپذیرد با این تفاوت که مقادیر فقط یک مورد را جابه جا میکند.
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
مثال ترکیبی:
Flex
خب حالا میخوام یه راهی برای کوتاه تر شدن کد هاتون بگم با استفاده از این ویژگی میتوانید کد های flex-grow و flex-shrink وflex-basis را به ترتیب مقدار هاشو وارد کنین.
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
خب قسمت فلکس باکس پیشرفته هم به پایان رسید امیدوارم لذت برده باشید.
