illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

CSS Flexbox (جلسه سوم): Flex Items و خاصیت(property)های مربوط به آن

3 3844 ۲۳ مرداد ۹۳

به نام یگانه هستی بخش

 با سلام خدمت دوستان عزیز سون‌لرنی. در جلسه قبلی در به برسی خاصیت های مربوط به flex container پرداختیم. در این جلسه درباره ی flex items و خاصیت های مربوط به آن صحبت میکنیم.

Flex items

css-flexbox-preview

flex-grow


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

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

flex-grow

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

flex-shrink


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

flex-shrink

 

flex-basis


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

flex


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

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

order


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

order

align-self


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

align-self

 

 

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

یک صفحه ی واکنش‌گرا با استفاده از Flexbox


کد های HTML:

و کدهای CSS:

همونطور که دیدید به آسونی نحوه ی چیدمان آیتم هارا با استفاده از فلکس باکس تعیین کردیم.

این جلسه هم اینجا به پایان رسید. امیدوارم براتون مفید باشه.

موفق باشید.

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 3 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

    ٌWow ! این CSS Flexbox واقعا جذابه ..! لطفا ادامه بدین!

    • ‏‏
      علی امینی(۲۳ مرداد ۱۳۹۳)

      جلسه بعدی جلسه آخر این سری آموزشیه؛ مفاهیم پایه تقریبا همش گفته شده، فقط میمونه مطالب کاربردی flexbox که اون ها خارج از این سری آموزشی هستند.

  • ‏‏
    حسین حسنی(۱۸ بهمن ۱۳۹۳)

    سلام آقای امینی نمیشه مطالب کاربردی مربوط به flexbox رو هم آموزش بدین؟تشکر میکنم بابت آموزش خوبتون.

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram