سبد (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 مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه