صفحات واکنش گرا با 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;

}

مطالب مرتبط
ارتباط با تیم پشتیبانی وب یار

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

چه کمکی از تیم وب یار بر می آید ، با ما در میان بگذارید

برای گفتگو کلید ENTER را بفشارید

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

بالا