آموزش کامل دستورات 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، ترتیب نمایش عناصر با با خصیصه فوق عوض کنید:

 

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

---

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-grow, flex-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;
}

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

 

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

---

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

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

---

نتیجه

---