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

خصوصیت 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.

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