FlexBox CSS Property
به صورت پیش فرض ساختار المان های Block به صورت تمامی عرض می باشد. با استفاده از float می توان نحوه چینش آن ها را تغییر داد. به این شکل می توان با توجه به عرض المان ها آن ها را در کنار هم قرار داد.
float مشکلاتی را با خود به همراه دارد :
- پس از این که یک فرزند float شد از دسترس والد خود خارج می شود که این مشکل با overflow حل می شود.
- فرزند های float شده در صورتی که از یک ردیف خارج شوند باید با استفاده از clear از هم جدا شوند تا ستون ها بهم نریزد.
- ltr و rtl بر اساس مقادیر right , left در float می باشد که برای اپلیکیشن های چند زبانه مشکل ساز می باشند.
ما از flex-box استفاده می کنیم تا یک چینش هوشمند تر داشته باشم و همچنین مشکلات بالا را حل کنیم. هوشمند از نظر تغییر رفتار بر اساس شرایط (تغییر عرض یا ارتفاع).
display flex
برای این که یک المان از جریان چینش flex استفاده کند باید display: flex
را به والد آن ها بدهیم. تمامی Property های دیگر وابسته به این ویژگی می باشند.
.item-wrapper { display: flex; }
پس از این که این ویژگی را برای والد در نظر گرفتیم می توان گفت که المان های ما از قوانین flex پیروی می کنند که گام بعد تعیین همین قوانین است. (به صورت پیش فرض مقادیری این قوانین دارند)
1
2
3
4
5
6
تفاوت میان flex و float در این است که ما ویژگی float را برای المان های فرزند در نظر می گرفتیم ولی ویژگی flex را برای المان والد در نظر می گیریم که کار را برای ما ساده تر می کند. البته ویژگی هایی منحصر برای المان های فرزند هم داریم.
همان طور که می بینید ترتیب بندی در وب سایت بر اساس direction تعیین می شود که ما شروع چینش از چپ باشد یا از راست. البته ما ویژگی های flex-direction و order را هم داریم که می توان با آن ترتیب را تغییر داد که همگی وابسته به این المان هستند.
Flexbox Properties
بعد از تعیین مقدار flex باید قوانینی جهت نمایش چینش وضع کنیم که همگی آن ها وابسته به display flex می باشند.
flex-direction
: جهت چینش باکس ها را نمایش می دهد. مقادیری که این property می گیرد :
- row : به صورت ردیف در کنار هم با پیروی از direction که تقریبا حالت inline دارد (حالت پیش فرض)
- row-reverse : به صورت ردیف در کنار هم عکس جهت direction
- column : به صورت ستونی بر اساس ترتیب که مثل block عمل می کند (تمام عرض صفحه را می گیرد)
- column-reverse : به صورت ستونی یا همان block عکس ترتیب قرار گیری.
flex-wrap
: این property تعیین می کند که با توجه به اندازه صفحه نمایش مقادیر بشکنند در زیر هم بیفتند یا خیر. این مورد تقریبا حکم white-space برای متون را دارد.
- no-wrap : یعنی به هیچ وجه المان ها نشکنند و زیر هم نیفتند (مقدار پیش فرض)
- wrap : اگر فضای کافی برای قرار گیری المان ها در کنار هم نباشد المان اضافی بشکند به زیر ردیف بیفتد.
- wrap-reverse : همان خاصیت wrap ولی با ویژگی reverse که یعنی چینیش بر عکس direction باشد.
flex-flow
: ترکیبی از موارد بالا می باشد. یعنی ابتدا flex-direction
و بعد flex-wrap
را به آن می دهیم.
.item-wrapper { flex-flow: row wrap; }
justify-content
: مبنای چینش طولی المان ها . justify ↔ width که می تواند مقادیر زیر را داشته باشد :
- flex-start : یعنی تمامی المان ها از ابتدا شروع و فاصله انتهایی آن ها مهم نمی باشد. (یعنی چسبیده به چپ در ltr )
- flex-end : تمامی المان ها از انتها شروع گردند. ( یعنی چسبیده به راست در rtl )
- space-between : محاسبه و تنظیم فاصله میان المان ها به صورت مرتب بدون در نظر گرفتن فاصله ابتدایی و انتهایی (یعنی چسبیده به چپ و راست)
- space-around : تنظیم فاصله مساوی میان المان ها با در نظر گرفتن فاصله ابتدایی و انتهایی. (یعنی از چپ و راست هم به اندازه میان المان ها فاصله باشد)
align-items
: نحوه تنظیم ارتفاع بر اساس بزرگترین المان در هر ردیف align ↔ height که مقادیر زیر می باشد :
- stretch : تنظیم ارتفاع item بر اساس بزرگترین item.
- flex-start : همگی از ابتدا شروع و تا اندازه محتوا پایان می ابند.
- flex-end : همه از انتها شروع به اندازه محتوا پایان می یابند.
- center : بر اساس بزرگترین المان هر ردیف سایر المان ها با همان اندازه خود وسط چین می شوند.
استایل که به item-wrapper داده شده به شکل زیر است :
.flex-container { display: flex; align-items: stretch; } .flex-item { padding: 10px; margin: 10px; color: black; width: 33%; }
می توانید با استفاده از ابزار inspect element ویژگی align-items را در مثال بالا تغییر دهید.
align-self
: چینش فرزند نسبت به ارتفاع والد که تقریبا اگر همان رفتار align-items این بار با دادن ویژگی به فرزند اتفاق می افتد.
flex-grow
: برای رشد هر المان در ردیف به نسبت سایرین. اعدادی که به هر یک از المان ها می دهید نهایتا یک عرض نسبت سایرین می باشد.
order
: ترتیب نمایش هر یک از المان های فرزند را نسبت به هم تعیین می کند. به صورت پیش فرض اگر المان های فرزند order نداشته باشند به ترتیب بر اساس direction چیده می شوند . ولی با استفاده از این ویژگی می توان ترتیب را تغییر داد.
دیدگاهتان را بنویسید