سبد (0)

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

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

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

آموزش صوتی JavaScript

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

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

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

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