تیشرت اختصاصی برنامه نویس ها
خرید
اطلاعات بیشتر
تیشرت Laravel
خرید
اطلاعات بیشتر

آموزش کامل دستورات CSS Flexbox به همراه مثال – قدم دوم

align-content

این خصیصه عناصر داخل نگهدارنده را وقتی فضای خالی بین شان باشد، در همه محورها مرتب می کند.درست شبیه کاری که خصیصه justify-content روی محور اصلی انجام می دهد.

.flex-container {
-webkit-align-content: stretch; /* Safari */
align-content: stretch;
}

همانطور که می بینید عناصر flex با فاصله بعد از هر ردیف نمایش داده شده اند.

.flex-container {
-webkit-align-content: flex-start; /* Safari */
align-content: flex-start;
}

بوسیله کد بالا همه عناصر به سمت نقطه شروع نگهدارنده کنار هم جمع می شوند.

.flex-container {
-webkit-align-content: flex-end; /* Safari */
align-content: flex-end;
}

بر عکس مورد قبلی ، با این کد می توانید عناصر داخل نگهدارنده را به سمت گوشه پایینی مایل کنید.

.flex-container {
-webkit-align-content: center; /* Safari */
align-content: center;
}

حالا اگر بخواهید عناصر را در مرکز محور اصلی قرار دهید به این شکل خواهد بود

.flex-container {
-webkit-align-content: space-between; /* Safari */
align-content: space-between;
}

حالا ردیف ها به فاصله یکسانی که بین شان هست دیده می شوند.ردیف اول و آخر هم به لبه های نگهدارنده می چسبند.

.flex-container {
-webkit-align-content: space-around; /* Safari */
align-content: space-around;
}

در این حالت فاصله بین همه ردیف ها به صورت یکسان وجود دارد.

مقدار پیش فرض: stretch

نکته: این خصیصه وقتی کار می کند که نگهدارنده flex دارای چند سطر باشد. اگر فقط یک سطر داشته باشد این خصیصه کار نمی کند.


نکته هایی در مورد نگهدارنده flex:

  • همه خصیصه های column-* هیچ تاثیری روی نگهدارنده flex ندارد.
  • انتخابگرهای کاذب ::first-line و ::first-letter روی نگهدارنده flex اعمال نمی شوند.

order

این خصیصه همانطور که از اسمش پیداست ترتیب نمایش عناصر داخل نگهدارنده را مشخص می کند.به صورت پیش فرض به ترتیب اضافه شدن به صفحه نمایش می یابند.

.flex-item {
-webkit-order: ; /* Safari */
order: ;
}

همانطور که می بینید می توانید بدون تغییر دادن کدهای HTML، ترتیب نمایش عناصر با با خصیصه فوق عوض کنید:

در همین رابطه :   آموزش انتخابگر ها (Selectors) در CSS

مقدار پیش فرض: ۰


flex-grow

این خصیصه نیز جالب است چون نحوه گسترش پهنای یک عنصر را نسبت به دیگر عناصر مشخص می کند.

.flex-item {
-webkit-flex-grow: ; /* Safari */
flex-grow: ;
}

اگر همه عناصر دارای flex-grow یکسان باشند با سایز یکسان نمایش داده می شوند

اینجا هم عنصر دوم به اندازه ۳ عنصر جا گرفته است

مقدار پیش فرض: ۰

نکته: اعداد نباید منفی باشند.


flex-shrink

این خصیصه مشخص می کند وقتی فضا داخل نگهدارنده کم است، یک عنصر چقدر می توانند نسبت به بقیه عناصر کوچک تر شود.

.flex-item {
-webkit-flex-shrink: ; /* Safari */
flex-shrink: ;
}

به صورت پیش فرض همه عناصر کوچک می شوند ولی اگر مقدار خصیصه فوق را ۰ بگذارید، آن عنصر در سایز اصلی خود باقی خواهد ماند و کوچک نمی شود

مقدار پیش فرض: ۱

نکته: مقادیر باید مثبت باشند.


flex-basis

این خصیصه مقادیری مثل width و height می گیرد وسایز ابتدایی عنصر را مشخص می کند.

.flex-item {
-webkit-flex-basis: auto | ; /* Safari */
flex-basis: auto | ;
}

برای عنصر چهارم سایز مشخص شده است

مقدار پیش فرض: auto

نکته: یک مشکل نامگذاری با auto وجود دارد که حل خواهد شد.


flex

این خصیصه میانبری برای خصیصه های flex-growflex-shrink و flex-basis است.

.flex-item {
-webkit-flex: none | auto | [ ? || ]; /* Safari */
flex: none | auto | [ ? || ];
}

مقدار پیش فرض: ۰ ۱ auto


align-self

با این خصیصه می توانید چینش پیش فرض (یا چینش مربوط به align-items) را لغو کرده و چینش خاصی به یک عنصر بدهید.

.flex-item {
-webkit-align-self: auto | flex-start | flex-end | center | baseline | stretch; /* Safari */
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

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

در همین رابطه :   آموزش کامل دستورات CSS Flexbox به همراه مثال - قدم اول

مقدار پیش فرض: auto


نکته ای در مورد عناصر flex

خصیصه های floatclear و vertical-align هیچ تاثیری روی عنصر flex ندارند.

 

دسته بندی : CSS

پاسخ دهید

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

More in فونت
۵۰ فونت انگلیسی جدید و بسیار زیبا ۲۰۱۱

امروز 50 فونت جدید و داغ سال 2011 را از طرف سایت 1stwebdesigner برای شما آماده کرده ایم که امیدواریم...

Close