CSS – تصحیح تراز درونی (Justify Self)
ویژگی justify-self
در CSS تنظیمات پیشفرضی را برای تراز کردن عناصر در یک محور مربوطه در نظر میگیرد. به عبارت دیگر، این ویژگی به هر عنصر یک تراز پیشفرض برای محور مورد نظر اعمال میکند. این تراز برای هر عنصر بهطور جداگانه قابل تنظیم است و میتواند متفاوت باشد.
بهعنوان مثال، اگر یک عنصر در یک شبکه با دو ستون و دو ردیف داشته باشیم، با استفاده از justify-self
میتوانیم تعیین کنیم که آیا عنصر به طور پیشفرض در ستون اول یا دوم قرار بگیرد.
با اینکه justify-self
میتواند برای تعیین تراز در هر دو محور (افقی و عمودی) استفاده شود، اما برخی از ویژگیهای مرتبط با افقی شدن عناصر مانند justify-items
در نظر گرفته نمیشود. این ویژگی برای مدیریت تراز بندی درون خود عناصر استفاده میشود، در حالی که justify-items
برای مدیریت تراز بندی کلی اعمال میشود.
این ویژگی (justify-self
) میتواند مقادیر مختلفی را بپذیرد که هرکدام تأثیر متفاوتی روی تراز بندی عناصر دارند:
-
auto
: این مقدار بر اساس ویژگیjustify-items
جعبه والدین تعیین میشود، به استثنای زمانی که جعبه والدین ندارد یا بهطور مطلق قرار گرفته است، جایی که به طور پیشفرض به ‘auto’ که نرمال را نمایان میکند، بازمیگردد. -
normal
: اثر این کلمه کلیدی بر روی حالت چیدمان تعیین میشود:-
در چیدمانهای بلوکی، این کلمه کلیدی همان
start
است. -
در موقعیت مطلق، این کلمه کلیدی به عنوان “start” برای جعبههای جایگزین و به عنوان “stretch” برای جعبههای مطلق دیگر عمل میکند.
-
این کلمه کلیدی در چیدمانهای سلول جدول بیمعنی است زیرا ویژگی آن نادیده گرفته میشود.
-
این کلمه کلیدی در چیدمانهای فلکس بازتاب ندارد.
-
برای عناصر شبکه، این کلمه کلیدی به عنوان یک کشیدن (stretch) عمل میکند، به استثنای جعبههایی با نسبت جانبی یا اندازههای جانشین، که مانند یک شروع (start) عمل میکند.
-
-
start
: عناصر را در لبه شروع کانتینر تراز میکند. -
end
: عناصر را در لبه پایانی کانتینر تراز میکند. -
center
: عناصر را در وسط کانتینر تراز میکند. -
flex-start
: این مقدار به عناصری که فرزندان یک جعبه فلکس نیستند، به عنوان شروع در نظر گرفته میشود. -
flex-end
: این مقدار به عناصری که فرزندان یک جعبه فلکس نیستند، به عنوان پایان در نظر گرفته میشود. -
self-start
: عناصر را به لبه شروع کانتینر در محور مناسب تراز میکند. -
self-end
: عناصر را به لبه پایانی کانتینر در محور مناسب تراز میکند. -
left
: عناصر را به لبه چپ کانتینر تراز میکند. این مقدار مانند “start” عمل میکند اگر محور ویژگی متناسب با محور خطی نباشد. -
right
: عناصر را به لبه راست کانتینر در محور مناسب تراز میکند. این مقدار مانند “start” عمل میکند اگر محور ویژگی متناسب با محور خطی نباشد. -
baseline, first baseline, last baseline: این مقادیر برای تعیین تراز بنیادی یک المان نسبت به خطوط پایه (baselines) در گروههایی از المانها با هم ارائه میشود. هنگامی که از این مقادیر استفاده میشود، المان بازنده اولین یا آخرین خط پایه خود را با خط پایه معین شده همسطح میکند. اگر خطوط پایه مشخص شده نباشند، از مقدار “start” برای اولین خط پایه و “end” برای آخرین خط پایه استفاده میشود.
-
stretch: وقتی از این مقدار استفاده میشود، وقتی ابعاد کلی المانها کمتر از ظرفیت تراز بندی باشد، المانهای با ابعاد خودکار به طور یکنواخت بزرگتر میشوند، به محدودیتهای بیشینه ارتفاع و عرض بستگی دارد، و ابعاد ترکیبی آنها به طور کامل فضای تراز بندی را پر میکند.
-
safe: وقتی مقدار “safe” استفاده میشود، اگر ابعاد المان از محدوده تراز بندی بیشتر باشد، المانها به طوری تراز شدهاند که به نظر میرسد که حالت تراز “start” برای آنها اعمال شده است.
-
unsafe: وقتی از مقدار “unsafe” استفاده میشود، تراز بندی مشخص شده برای المان رعایت میشود، بدون در نظر گرفتن ابعاد نسبی المان و ظرفیت تراز بندی.
auto Value
در این مثال، ما از ویژگی justify-self
با مقدار auto
استفاده میکنیم که به المان مورد نظر اجازه میدهد که عرض خود را به اندازه ممکن و مقرر شده توسط محتوای داخلی خود گسترش دهد. به عبارت دیگر، المان با این تنظیم، اندازه خود را به نحوی تنظیم میکند که عرض آن به اندازه محتوا درونش تعیین شود.
در اینجا، المان با کلاس item2
دارای justify-self: auto
است. این باعث میشود المان داخلی خود را به اندازه ممکن و محتوای داخلی خود گسترش دهد و از سمت راست به چپ سیستم ترازبندی گرید را پر کند.
<html>
<head>
<style>
.container {
border: 1px solid black;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
padding: 10px;
background-color: greenyellow;
}
.container > div {
border: 2px solid black;
padding: 5px;
text-align: center;
width: 90%;
}
.item {
background-color: lightgray;
}
.item2 {
background-color: violet;
justify-self: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item2">justify-self: auto</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>
normal Value
در این مثال، ما از ویژگی justify-self
با مقدار normal
استفاده میکنیم که المان مورد نظر را به لبه چپ سلول شبکه میچیند. به عبارت دیگر، این تنظیم باعث میشود که المان داخلی (item2
) به سمت چپ سلول شبکه تراز شود و عرض مورد نیاز برای نمایش محتوا به اندازه لازم اختصاص داده شود.
در اینجا، المان با کلاس item2
دارای justify-self: normal
است. این باعث میشود المان داخلی به لبه چپ سلول شبکه تراز شود و اندازه لازم برای نمایش محتوا را به طور عادی تعیین کند.
<html>
<head>
<style>
.container {
border: 1px solid black;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
padding: 10px;
background-color: greenyellow;
}
.container > div {
border: 2px solid black;
padding: 5px;
text-align: center;
}
.item {
background-color: lightgray;
width: 90%;
}
.item2 {
background-color: violet;
width: 60%;
justify-self: normal;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item2">justify-self: normal</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>
stretch Value
در این مثال، ما از ویژگی justify-self
با مقدار stretch
استفاده میکنیم که باعث میشود المان مورد نظر (.item2
) به طور کامل در عرض سلول شبکه کشیده شود و فضایی که در داخل سلول وجود دارد را پر کند.
با تنظیم justify-self
به stretch
برای المان داخلی با کلاس item2
، عرض آن به اندازه کاملی که میتواند، گسترده شده و به اندازه عرض سلول شبکه کشیده میشود. این باعث میشود که محتوای داخلی به طور کامل در سلول شبکه قرار گیرد و هیچ فضای خالی اطراف آن باقی نماند.
<html>
<head>
<style>
.container {
border: 1px solid black;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
padding: 10px;
background-color: greenyellow;
}
.container > div {
border: 2px solid black;
padding: 5px;
text-align: center;
width: 90%;
}
.item {
background-color: lightgray;
}
.item2 {
background-color: violet;
justify-self: stretch;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item2">justify-self: stretch</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>
start Value
در این مثال، ما از ویژگی justify-self
با مقدار start
استفاده میکنیم که باعث میشود المان دوم (.item2
) در سلول شبکه از سمت چپ یا ابتدای سلول قرار بگیرد.
با تنظیم justify-self
به start
برای المان داخلی با کلاس item2
، عرض آن به حداقل اندازه ممکن تنظیم شده و از سمت چپ یا ابتدای سلول شبکه قرار میگیرد. این باعث میشود که محتوای داخلی از سمت چپ یا ابتدای سلول شبکه شروع شود و به اندازه ممکن از سمت راست فضای خالی باقی بماند.
<html>
<head>
<style>
.container {
border: 1px solid black;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
padding: 10px;
background-color: greenyellow;
}
.container > div {
border: 2px solid black;
padding: 5px;
text-align: center;
}
.item {
background-color: lightgray;
width: 90%;
}
.item2 {
background-color: violet;
width: 60%;
justify-self: start;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item2">justify-self: start</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>
end Value
در این مثال، ما از ویژگی justify-self
با مقدار end
استفاده میکنیم که باعث میشود المان دوم (.item2
) در سلول شبکه از سمت راست یا انتهای سلول قرار بگیرد.
با تنظیم justify-self
به end
برای المان داخلی با کلاس item2
، عرض آن به حداکثر اندازه ممکن تنظیم شده و از سمت راست یا انتهای سلول شبکه قرار میگیرد. این باعث میشود محتوای داخلی از سمت راست یا انتهای سلول شبکه شروع شده و به اندازه ممکن از سمت چپ فضای خالی باقی بماند.
<html>
<head>
<style>
.container {
border: 1px solid black;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
padding: 10px;
background-color: greenyellow;
}
.container > div {
border: 2px solid black;
padding: 5px;
text-align: center;
}
.item {
background-color: lightgray;
width: 90%;
}
.item2 {
background-color: violet;
width: 60%;
justify-self: end;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item2">justify-self: end</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>
center Value
در این مثال، ما از ویژگی justify-self
با مقدار center
استفاده میکنیم که باعث میشود المان دوم (.item2
) در مرکز سلول شبکه قرار بگیرد.
با تنظیم justify-self
به center
برای المان داخلی با کلاس item2
، عرض آن به حداکثر اندازه ممکن تنظیم شده و از مرکز سلول شبکه قرار میگیرد. این باعث میشود محتوای داخلی در مرکز سلول قرار بگیرد و همچنین فضای خالی در دو طرف آن به صورت یکسان باقی میماند.
<html>
<head>
<style>
.container {
border: 1px solid black;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
padding: 10px;
background-color: greenyellow;
}
.container > div {
border: 2px solid black;
padding: 5px;
text-align: center;
}
.item {
background-color: lightgray;
width: 90%;
}
.item2 {
background-color: violet;
width: 60%;
justify-self: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item2">justify-self: center</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>
flex-start Value
در این مثال، ما از ویژگی justify-self
با مقدار flex-start
استفاده میکنیم که باعث میشود المان دوم (.item2
) به ابتدای (چپ) سلول شبکه منتقل شود.
با تنظیم justify-self
به flex-start
برای المان داخلی با کلاس item2
، عرض آن به حداکثر اندازه ممکن تنظیم شده و در ابتدای سلول شبکه قرار میگیرد. این باعث میشود محتوای داخلی در ابتدای سلول قرار بگیرد و همچنین فضای خالی در سمت راست آن باقی میماند.
<html>
<head>
<style>
.container {
border: 1px solid black;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
padding: 10px;
background-color: greenyellow;
}
.container > div {
border: 2px solid black;
padding: 5px;
text-align: center;
}
.item {
background-color: lightgray;
width: 90%;
}
.item2 {
background-color: violet;
width: 60%;
justify-self: flex-start;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item2">justify-self: flex-start</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>
flex-end Value
در این مثال، ما از ویژگی justify-self
با مقدار flex-end
استفاده میکنیم که باعث میشود المان دوم (.item2
) به انتهای (راست) سلول شبکه منتقل شود.
با تنظیم justify-self
به flex-end
برای المان داخلی با کلاس item2
، عرض آن به حداکثر اندازه ممکن تنظیم شده و در انتهای سلول شبکه قرار میگیرد. این باعث میشود محتوای داخلی در انتهای سلول قرار بگیرد و همچنین فضای خالی در سمت چپ آن باقی میماند.
<html>
<head>
<style>
.container {
border: 1px solid black;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
padding: 10px;
background-color: greenyellow;
}
.container > div {
border: 2px solid black;
padding: 5px;
text-align: center;
}
.item {
background-color: lightgray;
width: 90%;
}
.item2 {
background-color: violet;
width: 60%;
justify-self: flex-end;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item2">justify-self: flex-end</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>
self-start Value
در این مثال، ما از ویژگی justify-self
با مقدار self-start
استفاده میکنیم که باعث میشود المان دوم (.item2
) به ابتدای (چپ) سلول شبکه منتقل شود.
با تنظیم justify-self
به self-start
برای المان داخلی با کلاس item2
، عرض آن به حداکثر اندازه ممکن تنظیم شده و در ابتدای سلول شبکه قرار میگیرد. این باعث میشود محتوای داخلی در ابتدای سلول قرار بگیرد و همچنین فضای خالی در سمت راست آن باقی میماند.
<html>
<head>
<style>
.container {
border: 1px solid black;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
padding: 10px;
background-color: greenyellow;
}
.container > div {
border: 2px solid black;
padding: 5px;
text-align: center;
}
.item {
background-color: lightgray;
width: 90%;
}
.item2 {
background-color: violet;
width: 60%;
justify-self: self-start;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item2">justify-self: self-start</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>
self-end Value
در این مثال، ویژگی justify-self
با مقدار self-end
بر روی المان دوم (.item2
) استفاده شده است. این باعث میشود المان دوم به انتهای (راست) سلول شبکه منتقل شود.
با تنظیم justify-self
به self-end
برای المان داخلی با کلاس item2
، عرض آن به حداکثر اندازه ممکن تنظیم شده و در انتهای سلول شبکه قرار میگیرد. این باعث میشود محتوای داخلی در انتهای سلول قرار بگیرد و همچنین فضای خالی در سمت چپ آن باقی میماند.
<html>
<head>
<style>
.container {
border: 1px solid black;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
padding: 10px;
background-color: greenyellow;
}
.container > div {
border: 2px solid black;
padding: 5px;
text-align: center;
}
.item {
background-color: lightgray;
width: 90%;
}
.item2 {
background-color: violet;
width: 60%;
justify-self: self-end;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item2">justify-self: self-end</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>
left Value
در این مثال، ویژگی justify-self
با مقدار left
بر روی المان دوم (.item2
) استفاده شده است. این باعث میشود المان دوم به لبه چپ سلول شبکه منتقل شود.
با تنظیم justify-self
به left
برای المان داخلی با کلاس item2
، عرض آن به حداکثر اندازه ممکن تنظیم شده و در لبه چپ سلول شبکه قرار میگیرد. این باعث میشود محتوای داخلی در لبه چپ سلول قرار بگیرد و همچنین فضای خالی در سمت راست آن باقی میماند.
<html>
<head>
<style>
.container {
border: 1px solid black;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
padding: 10px;
background-color: greenyellow;
}
.container > div {
border: 2px solid black;
padding: 5px;
text-align: center;
}
.item {
background-color: lightgray;
width: 90%;
}
.item2 {
background-color: violet;
width: 60%;
justify-self: left;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item2">justify-self: left</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>
right Value
در این مثال، ویژگی justify-self
با مقدار right
بر روی المان دوم (.item2
) استفاده شده است. این باعث میشود المان دوم به لبه راست سلول شبکه منتقل شود.
با تنظیم justify-self
به right
برای المان داخلی با کلاس item2
، عرض آن به حداکثر اندازه ممکن تنظیم شده و در لبه راست سلول شبکه قرار میگیرد. این باعث میشود محتوای داخلی در لبه راست سلول قرار بگیرد و همچنین فضای خالی در سمت چپ آن باقی میماند.
<html>
<head>
<style>
.container {
border: 1px solid black;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
padding: 10px;
background-color: greenyellow;
}
.container > div {
border: 2px solid black;
padding: 5px;
text-align: center;
}
.item {
background-color: lightgray;
width: 90%;
}
.item2 {
background-color: violet;
width: 60%;
justify-self: right;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item2">justify-self: right</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>
baseline Value
در این مثال، ویژگی justify-self
با مقدار baseline
بر روی المان دوم (.item2
) استفاده شده است. این باعث میشود المان دوم بر اساس خط پایه متن درون خود درون سلول شبکه قرار گیرد.
وقتی justify-self
به baseline
برای المان داخلی با کلاس item2
تنظیم میشود، المان داخلی بر اساس خط پایه متن درون خود درون سلول شبکه قرار میگیرد. این به معنای آن است که محتوای داخلی به گونهای قرار میگیرد که خط پایه متن در سلول شبکه با خط پایه متن دیگر المانها منطبق شود. به عبارت دیگر، محتوای داخلی با توجه به مکان متن درون خود، در ردیفی که متنش قرار دارد، قرار میگیرد.
<html>
<head>
<style>
.container {
border: 1px solid black;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
padding: 10px;
background-color: greenyellow;
}
.container > div {
border: 2px solid black;
padding: 5px;
text-align: center;
}
.item {
background-color: lightgray;
width: 90%;
}
.item2 {
background-color: violet;
width: 60%;
justify-self: baseline;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item2">justify-self: baseline</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>
last baseline Value
در این مثال، ویژگی justify-self
با مقدار last baseline
بر روی المان دوم (.item2
) استفاده شده است. این باعث میشود المان دوم بر اساس خط پایه آخرین متن درون خود درون سلول شبکه قرار گیرد.
وقتی justify-self
به last baseline
برای المان داخلی با کلاس item2
تنظیم میشود، المان داخلی بر اساس خط پایه آخرین متن درون خود درون سلول شبکه قرار میگیرد. این به معنای آن است که محتوای داخلی به گونهای قرار میگیرد که خط پایه متن در سلول شبکه با خط پایه متن آخرین المانها منطبق شود. به عبارت دیگر، محتوای داخلی با توجه به مکان متن درون خود، در ردیفی که متنش قرار دارد، قرار میگیرد ولی در آخرین ردیف از سلول.
<html>
<head>
<style>
.container {
border: 1px solid black;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
padding: 10px;
background-color: greenyellow;
}
.container > div {
border: 2px solid black;
padding: 5px;
text-align: center;
}
.item {
background-color: lightgray;
width: 90%;
}
.item2 {
background-color: violet;
width: 60%;
justify-self: last baseline;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item2">justify-self: last baseline</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام