/ صفحات واکنش گرا با Flex Box و خاصیت FlexItem
تبلیغات شما
طراحی و راه اندازی وبسایت و انجمن توسط ویکی وی بی ویکی وی بی در قبال معاملات صورت گرفته با هر یک از اعضا و سفارشات طراحی خارج از این اطلاعیه هیچگونه مسئولیتی نمی پذیرد
سپاهان سرور وندا هاست
نمایش نتایج: از 1 به 1 از 1

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

  1. #1
    marzieh1270 آنلاین نیست.
    marzieh1270
    کاربر سايت
    60نوشته6مورد پسند

    تاریخ عضویت
    Feb 2017
    شماره عضویت
    13003
    پسندیده است
    0 پست
    بلاگ
    پست
    میزان امتیاز
    16
    No Set

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

    منبع: سایت وب یار

  2. نوين وردپرس تبلیغات شما

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

موضوعات مشابه

  1. طراحی سبک های جدید با Flex Box
    توسط atlasweb در انجمن CSS
    پاسخ: 0
    آخرين نوشته: 10-24-2015, 10:37 AM

کلمات کلیدی این موضوع

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

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •  
تبلیغات شما تبلیغات شما
ونداهاست
مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی