لوگو دویکس
ورود / ثبت نام
ویژگی justify content

ویژگی justify content

دسته بندی : آموزش CSS سطح مقاله : متوسط زمان مطالعه : 1 دقیقه آخرین بروز رسانی: 25 بهمن 1399

با ویژگی justify content در CSS آشنا می شوید.

چگونه محتوا را در یک ظرف فلکس توجیه کنیم

اگر موارد کل فضای موجود در آن ها را پر نکرد ، می توانید از ویژگی CSS justify برای تراز کردن آن ها در محور افقی ظرف فلکس یا شبکه استفاده کنید:

div {
    /* For Safari browsers */
    display: -webkit-flex; 
    -webkit-justify-content: flex-end;
    /* Standard */
    display: flex;
    justify-content: flex-end;  	
}

نکته: برای انجام همان کار در محور عمودی ، از محتوای هم تراز استفاده کنید.

بررسی ویژگی justify content

نحو محتوای توجیهی CSS به شرح زیر است:

justify-content: value؛

برای تعریف مقدار می توانید از یکی از کلمات کلیدی توضیح داده شده در بخش زیر استفاده کنید.

ویژگی ها

DescriptionValue
مقدار پیش فرض موارد با توجه به موقعیت های پیش فرض خود قرار می گیرندnormal
موارد از ابتدای ظرف قرار می گیرندflex-start
موارد از انتهای ظرف قرار می گیرندflex-end
این موارد در سمت چپ ظرف قرار گرفته اندleft
موارد در مرکز کانتینر قرار گرفته اندcenter
موارد در سمت راست ظرف قرار گرفته اندright
موضوعات به طور مساوی با فاصله های نیم سایز در دو انتهای ظرف قرار گرفته اندspace-around
موضوعات به طور مساوی قرار گرفته و در دو انتهای ظرف فضای خالی باقی نمی ماندspace-between
موضوعات به طور مساوی با فاصله مساوی در اطراف آنها در ظرف قرار می گیرندspace-evenly
موارد به طور مساوی قرار می گیرند و مواردی که دارای اندازه اتوماتیک هستند ، متناسب با ظرف کشیده می شوندstretch

پشتیبانی از مرورگر

این تگ در مرورگرهای IE ، safari ، firefox، cherom، opera وEdge پشتیبانی می شود.

در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.

این مقاله چقدر براتون مفید بود؟

اولین امتیاز را ثبت کنید😊