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 ندارند.