صفحات واکنش گرا با Flex Box و خاصیت FlexItem

آخرین بروز رسانی: بهمن ۲۸, ۱۳۹۴

باادامه ی آموزش های ساخت صفحات واکنش گرا(ریسپانسیو,Responsive (با استفاده از فلکس باکسFlexBox و خاصیت های  flex container در جلسه ی قبل و در ادامه با مباحث

Flex items

صفحات واکنش گرا با Flex Box و خاصیت FlexItem

در خدمت شما هستیم.

Flex items

 

flex-grow

این خاصیت توانایی بزرگ شدن یک آیتم را تعیین میکند. این خاصیت یک مقدار عددی بدون واحد میپذیرد. مقدار پیشفرض آن ۰ است؛ یعنی آیتم‌ها توانایی بزرگ شدن را ندارند. در صورتی که flex container فضای خالی داشته باشد و به یک آیتم flex-grow: 1; بدهید، آن آیتم تا جایی بزرگ میشود که فضای خالی درون container از بین برود.

دقت داشته باشید که هنگامی که خاصیت flex-direction فلکس container برابر row باشد، flex-grow بر عرض(width) آیتم اعمال میشود و اگر مقدار آن خاصیت برابر column باشد، flex-grow بر ارتفاع(height) اعمال میشود.

۱

۲

۳

.item2{

flex-grow: 1;

}

اگر به همه ی فلکس آیتم ها flex-grow: 1; بدهید، همه ی آنها به یک اندازه بزرگ میشوند. اگر در همین حالت مقدار flex-grow یکی از آیتم هارا ۲ قرار دهید، آن آیتم ۲ برابر دیگر آیتم خواهد شد.

flex-shrink

این خاصیت توانایی کوچک شدن یک آیتم را در صورت لزوم تعیین میکند. مقدار پیشفرض آن ۱ است، یعنی آیتم ها میتوانند کوچک شوند. اگر خاصیتflex-wrap فلکس container برابرnowrap باشد، آیتم ها تا زمانی که عرضشان به ۰ برسد کوچک میشوند. حال اگر در این صورت مقدار flex-shrink یکی از آیتم ها را برابر ۲ قرار دهیم، آن آیتم ۲ برابر دیگر آیتم ها کوچک میشود.

۱

۲

۳

۴

۵

۶

.container{

flex-wrap: nowrap;

}

.container .item2{

flex-shrink: 2;

}

 

flex-basis

این خاصیت مقدار پایه ی عرض یا ارتفاع آیتم را تعیین میکند. یعنی عرض یا ارتفاع(به ستونی یا ردیفی بودن آیتم ها بستگی دارد) از این مقدار پایه نمیتواند کمتر شود. این خاصیت مانند min-height و min-width عمل میکند. مقدار پیشفرض این خاصیت auto می باشد، یعنی فلکس آیتم ها میتوانند تا جایی کوچک شوند که عرض یا اتفاع آنها به صفر برسد.

۱

۲

۳

۴

۵

۶

.item{

flex-grow: 1;

}

.item2{

flex-basis: 200px;

}

flex

این خاصیت یک مختصر نویسی برای خاصیت های flex-grow ، flex-shrink و flex-basis میباشد.

۱

۲

۳

.item{

flex: none | [<flex-grow> <flex-shrink> <flex-basis>];

}

مقادیر دوم و سوم (flex-shrink و flex-basis)  اختیاری هستند.

order

این مقدار میتواند مکان قرار گیری فلکس آیتم در کنار دیگر فلکس ایتم ها را مشخص کند. مقدار پیشفرض ۰ است. اگر تنها مقدار order یکی از فلکس آیتم هارا تعیین کنید، آن آیتم بعد از تمامی آیتم ها قرار میگیرد، ولی اگر این خاصیت را برای همه ی فلکس ایتم ها تعریف کنید، میتوانید جایگاه قرار گیری فلکس آیتم هارا مشخص کنید. این خاصیت یکی از کاربردی ترین خاصیت ها هنگام طراحی واکنش‌گرا(responsive) هست.

۱

۲

۳

۴

۵

۶

۷

.item{

flex: 1 100px; /* flex-grow: 1; flex-basis: 100px; */

}

.item1{order: 2;}

.item2{order: 4;}

.item3{order: 1;}

.item4{order: 3;}

align-self

مقدار پیشفرض این خاصیت مقدار تعیین شده برای خاصیت align-items خاصیت مربوط به (flex container) میباشد. با استفاده از این خاصیت میتوان نحوه ی قرار گرفتن عمودی(در محور عرضی یا cross axis) قلکس آیتم هارا فردی کرد. مقادیر این خاصیت مانند مقادیر خاصیت align-items است.

۱

۲

۳

.item {

align-self: auto | flex-start | flex-end | center | baseline | stretch;

}

 

۱

۲

۳

۴

۵

۶

.container{

align-items: flex-start;

}

.container .item2{

align-self: flex-end;

}

مطالب مرتبط

کلیه حقوق مادی و معنوی این اثر متعلق به طراحی سایت اصفهان وب یار می باشد CopyRight 2016