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

خصوصیت justify-content چه کاربردی دارد؟

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

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

1. مقدار flex-start : این مقدار پیش فرض است. با استفاده از این مقدار، آیتم ها در ابتدای ظرف انعطاف پذیر قرار می گیرند.
2. مقدار flex-end : آیتم ها در پایان ظرف انعطاف پذیر قرار می گیرند.
3. مقدار center: آیتم ها در وسط ظرف انعطاف پذیر قرار می گیرند.
4. مقدار space-between : با استفاده از آن، در بین خطوط آیتم ها، فاصله قرار می گیرد تا تراز شوند.
5. مقدار space-around: با استفاده از آن، در قبل و بعد و همچنین در بین آیتم ها، فاصله قرار می گیرد تا تراز شوند.

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

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

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

See the Pen VWwJVx by Ehsan Abbasi (@sbaloot) on CodePen.

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

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

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

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

 برای ادامه ی بحث، به قسمت سوم این مقاله مراجعه کنید. 

• قبلی
• بعدی