سبد (0)

طراحی نوار وضعیت حبابی(قسمت سوم)

خصوصیت align-items چیست؟ 

خصوصیت align-items به صورت عمودی آیتم های ظرف انعطاف پذیر را هنگامی که این آیتم ها از تمام فضای در دسترس خود در محور  عمودی  استفاده نمی کنند، تراز می کند.

مقادیر امکان پذیر برای این خصوصیت عبارتند از:

  1. مقدار stretch : این مقدار پیش فرض است. و باعث می شود که آیتم ها کشیده شوند تا به اندازه ی ظرف انعطاف پذیر در بیایند.
  2. مقدار flex-start : با استفاده از آن، آیتم ها در بالای ظرف انعطاف پذیر قرار می گیرند.
  3. مقدار flex-end : با استفاده از آن، آیتم ها در پایین ظرف انعطاف پذیر قرار می گیرند.
  4. مقدار center: با استفاده از آن، آیتم ها از لحاظ عمودی، در وسط ظرف انعطاف پذیر قرار می گیرند.
  5. مقدار baseline : با استفاده از آن، آیتم ها در نقطه ی شروع ظرف انعطاف پذیر قرار می گیرند.

در مثال زیر، از مقدار stretch استفاده شده است(این مقدار، پیش فرض است):

See the Pen مثال 10 by Ehsan Abbasi (@sbaloot) on CodePen.

در مثال زیر، از مقدار flex-start استفاده شده است:

 

See the Pen مثال 11 by Ehsan Abbasi (@sbaloot) on CodePen.

در مثال زیر، از مقدار flex-end استفاده شده است:

  

See the Pen مثال 12 by Ehsan Abbasi (@sbaloot) on CodePen.

در مثال زیر از مقدار center استفاده شده است:

  

See the Pen مثال 13 by Ehsan Abbasi (@sbaloot) on CodePen.

در مثال زیر از مقدار baseline استفاده شده است:

  

See the Pen مثال 14 by Ehsan Abbasi (@sbaloot) on CodePen.


به منظور مطالعه ی ادامه ی این آموزش، به مقاله ی بعدی مراجعه کنید. 

آموزش صوتی JavaScript

بستن
مدرس:
سوال و جواب:

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

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehiمجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامیپرداخت آنلاین -  بانک ملتمعرفی بیاموز در شبکه سهپرداخت آنلاین - بانک اقتصاد نوینپرداخت آنلاین - بانک سامان