تعداد بازدید: 2760

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 : بر اساس بزرگترین المان هر ردیف سایر المان ها با همان اندازه خود وسط چین می شوند.
Lorem ipsum dolor sit amet, ne timeam fastidii gloriatur usu, sit quas partem eu. Vix cu partem singulis hendrerit, sea eu ullum eripuit docendi. Prima graecis evertitur ut eos, eu mel ullum legimus perfecto. Eruditi veritus percipit mel no. Legimus dignissim efficiantur no quo, mel ex sint placerat voluptatum.Eum id postea periculis, at est labitur laoreet voluptua. Id nec quando accumsan atomorum. Viderer placerat no mea, et nonumy pericula mediocrem sea. Ne modo clita volutpat est, legendos contentiones sea ex, affert verear scripta quo ad. Phaedrum invenire urbanitas ut usu. At his minim bonorum.
Est labitur laoreet voluptua. Id nec quando accumsan atomorum. Viderer placerat no mea, et nonumy pericula mediocrem sea. Ne modo clita volutpat est, legendos contentiones sea ex, affert verear scripta quo ad. Phaedrum invenire urbanitas ut usu. At his minim bonorum.
Legimus perfecto. Eruditi veritus percipit mel no. Legimus dignissim efficiantur no quo, mel ex sint placerat voluptatum.Eum id postea periculis, at est labitur laoreet voluptua. Id nec quando accumsan atomorum. Viderer placerat no mea, et nonumy pericula mediocrem sea. Ne modo clita volutpat est, legendos contentiones sea ex, affert verear scripta quo ad. Phaedrum invenire urbanitas ut usu. At his minim bonorum.

استایل که به 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 : برای رشد هر المان در ردیف به نسبت سایرین. اعدادی که به هر یک از المان ها می دهید نهایتا یک عرض نسبت سایرین می باشد.

1
2
3

order : ترتیب نمایش هر یک از المان های فرزند را نسبت به هم تعیین می کند. به صورت پیش فرض اگر المان های فرزند order نداشته باشند به ترتیب بر اساس direction چیده می شوند . ولی با استفاده از این ویژگی می توان ترتیب را تغییر داد.

مطالب مشابه

ویرایشگر براکت brackets - توضیحات

ویرایشگر براکت Brackets

براکت ویرایشگری با امکانات گرافیکی بسیار قدرتمند که توسط برنامه نویسان زیادی با استفاده از زبان جاوااسکریپت نوشته شده...

فریم ورک بوتسترپ

Bootstrap 4

فریم ورک Bootstrap 4 با استفاده از تکنولوژی flexbox پیاده سازی شده که مهم ترین تغییر این فریم ورک می باشد. استفاده...

sass scss logo

آموزش Sass و کاربردها

sass یک ابزار قدرتمند برای تولید کدهای css می باشد (CSS Extension Language) می باشد. sass یک زبان پیش پردازنده...

اشتراک گذاری :

مدیر وب سایت گنوتک . برنامه نویسی رو با زبان C در هفده سالگی شروع کردم . در حال حاضر به برنامه نویسی php برپایه معماری MVC , HMVC و همچنین سیستم مدیریت محتوای WordPress و فریم ورک محبوب لاراول علاقه مند هستم و دوست دارم اطلاعاتم رو با شما به اشتراک بگذارم.

۰ دیدگاه برای FlexBox CSS Property

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *