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