CSS – قراردادن داخلی (Place Self)
خصوصیت place-self
یک خصوصیت اختصاری است که آیتمهای فردی را به طور همزمان در هر دو جهت بلوک و خطی (اینلاین) ترتیب میدهد، مشابه خصوصیتهای align-self
و justify-self
در سیستمهای طرحبندی مانند شبکه (Grid) یا فلکسباکس (Flexbox)، به طوری که اگر مقدار دوم تنظیم نشده باشد، از مقدار اول استفاده میشود.
این خصوصیت یک اختصار برای خصوصیتهای CSS زیر است:
- align-self
- justify-self
مقادیر ممکن:
auto
: آیتم را بر اساس مقدارalign-self
والدین ترتیب میدهد.normal
: تأثیر کلمه کلیدیnormal
بسته به حالت طرح بندی تغییر میکند:- رفتار مانند
start
در جعبههای جایگزین شده بهطور مطلق، و به عنوانstretch
در سایر جعبههای مطلقاً موقعیتیابی شده، زمانی که طرحبندی مطلق باشد. - مانند
stretch
در موقعیت استاتیک طرحبندیهای مطلقاً موقعیتیابی شده رفتار میکند. - برای آیتمهای فلکس مانند
stretch
عمل میکند. - برای آیتمهای شبکه عمل میکند، به جز جعبههایی که نسبت ابعاد یا اندازه درونی دارند که در آنها مانند
start
رفتار میکند. - بر روی جعبههای بلوکی و سلولهای جدول اعمال نمیشود.
- رفتار مانند
self-start
: آیتمها را به لبه کانتینر تطابقی از طرف شروع آیتم، در محور متقاطع، ترتیب میدهد.self-end
: آیتمها را به لبه کانتینر تطابقی از طرف پایان آیتم، در محور متقاطع، ترتیب میدهد.flex-start
: مرز متقابل شروع لبه انعطافپذیری آیتم را با لبه شروع خط همراه میکند.flex-end
: مرز متقابل پایانی انعطافپذیری آیتم را با لبه پایان خط همراه میکند.center
: حاشیه جعبه آیتم را درون خط در محور متقاطع مرکز میکند. زمانی که اندازه متقاطع یک عنصر از ظرف بزرگتر است، محتوا به طور مساوی در هر دو جهت سرریز میشود.
مقادیر baseline
، first baseline
و last baseline
در CSS خصوصیت place-self
به تعیین تطابق نقطهی پایه (baseline) اول یا آخر مربوط به آیتمهای فلکسباکس میپردازند. در اینجا:
baseline
: به طور پیشفرض به نقطهی پایه هر آیتم در یک خط اشاره دارد.first baseline
وlast baseline
: بهترتیب به نقطهی پایه اول و آخر مربوط به خطوط درون آیتمهای فلکسباکس اشاره دارند.
استفاده از این مقادیر باعث تعیین نحوهی ترتیب آیتمها بر اساس نقطهی پایه اول یا آخر درون خطوط شده و در نتیجه تنظیم موقعیت عناصر میشود.
همچنین، مقادیر start
و end
به عنوان تطابق پشتیبانی برای first-baseline
و last-baseline
استفاده میشوند. اگر first-baseline
تنظیم شود، start
به عنوان موقعیت پشتیبانی شده است و اگر last-baseline
تنظیم شود، end
به عنوان موقعیت پشتیبانی شده است.
در نهایت، مقدار stretch
زمانی اعمال میشود که اندازهی ترکیبی از آیتمها در همراه محور متقاطع از اندازهی ظرف کمتر باشد و آیتم به عنوان خودکار اندازه داده شود. در این صورت، اندازهی آیتمها به طور مساوی افزایش مییابد و اندازههای max-height
و max-width
حفظ میشوند.
normal start Value
این کد نمونه از ویژگی place-self
با مقدار normal start
در CSS استفاده میکند. این ویژگی، نحوهی قرارگیری یک عنصر داخل یک سلول شبکه را تنظیم میکند. در این مثال، place-self: normal start
به Item 2 اجازه میدهد که از طرف چپ سلول شبکه شروع شود.
توضیحات کد:
.container
: این کلاس CSS یک شبکه با دو ستون و ارتفاع ثابت برای هر سلول تعریف میکند..container > div
: این کلاس CSS سبک عناصر داخل شبکه را تعیین میکند..item2
: این کلاس CSSplace-self
بر روی Item 2 اعمال میشود و آن را به موقعیتnormal start
تنظیم میکند، که به آن اجازه میدهد که از طرف چپ سلول شروع شود.
وقتی کد بالا اجرا میشود، Item 2 به سمت چپ سلول شبکه قرار میگیرد و موقعیت عمودی آن عیناً بر مبنای align-self: normal
تعیین میشود.
<html>
<head>
<style>
.container {
background-color: red;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 100px;
grid-gap: 10px;
margin: 20px;
width: 300px;
}
.container > div {
background-color: greenyellow;
border: 3px solid blue;
text-align: center;
margin: 5px;
width: 60px;
height: 50px;
}
.item2 {
place-self: normal start;
}
</style>
</head>
<body>
<div class="container">
<div>Item 1</div>
<div class="item2">Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
</body>
</html>
auto center Value
در CSS، خصوصیت place-self
برای تنظیم موقعیت عناصر درون سلولهای شبکههای گرید مورد استفاده قرار میگیرد. این خصوصیت از دو مقدار align-self
و justify-self
تشکیل شده است که به طور همزمان ترتیب موقعیت عناصر در هر دو جهت را مشخص میکند.
حالت auto center
به معنای ترکیب دو مقدار auto
و center
است. در اینجا، auto
به معنای استفاده از مقدار پیشفرض مشخص شده برای موقعیت عمودی و افقی در سلول گرید است و center
نشان دهندهی قرار دادن عنصر در وسط سلول گرید است.
در مثال ارائه شده، عنصر دوم با کلاس .item2
با استفاده از خصوصیت place-self: auto center;
در وسط سلول گرید قرار میگیرد. این به این معناست که عنصر دوم در هر دو جهت (عمودی و افقی) به صورت مرکز قرار میگیرد.
اینجا یک نکته مهم است که باید توجه کرد: اگر مقدار auto
برای align-self
و justify-self
تنظیم شود، عنصر با توجه به مقدار پیشفرض مشخص شده برای موقعیت عمودی و افقی درون سلول گرید قرار میگیرد، و مقدار center
به معنای قرار دادن عنصر در وسط سلول است.
<html>
<head>
<style>
.container {
background-color: red;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 100px;
grid-gap: 10px;
margin: 20px;
width: 300px;
}
.container > div {
background-color: greenyellow;
border: 3px solid blue;
text-align: center;
margin: 5px;
width: 60px;
height: 50px;
}
.item2 {
place-self: auto center;
}
</style>
</head>
<body>
<div class="container">
<div>Item 1</div>
<div class="item2">Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
</body>
</html>
center normal Value
در CSS، خصوصیت place-self
برای تنظیم موقعیت عناصر درون سلولهای شبکههای گرید مورد استفاده قرار میگیرد. این خصوصیت از دو مقدار align-self
و justify-self
تشکیل شده است که به طور همزمان ترتیب موقعیت عناصر در هر دو جهت را مشخص میکند.
حالت center normal
به معنای ترکیب دو مقدار center
و normal
است. در اینجا، center
نشان دهندهی قرار دادن عنصر در وسط سلول گرید است و normal
به معنای استفاده از مقدار پیشفرض مشخص شده برای موقعیت عمودی درون سلول گرید است.
در مثال ارائه شده، عنصر دوم با کلاس .item2
با استفاده از خصوصیت place-self: center normal;
در مرکز سلول گرید قرار میگیرد. این به این معناست که عنصر دوم در هر دو جهت (عمودی و افقی) به صورت مرکز قرار میگیرد و ارتفاع عنصر مطابق با مقدار پیشفرض آن در سلول گرید تعیین میشود.
<html>
<head>
<style>
.container {
background-color: red;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 100px;
grid-gap: 10px;
margin: 20px;
width: 300px;
}
.container > div {
background-color: greenyellow;
border: 3px solid blue;
text-align: center;
margin: 5px;
width: 60px;
height: 50px;
}
.item2 {
place-self: center normal;
}
</style>
</head>
<body>
<div class="container">
<div>Item 1</div>
<div class="item2">Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
</body>
</html>
end normal Value
در CSS، خصوصیت place-self
برای تنظیم موقعیت عناصر درون سلولهای شبکههای گرید مورد استفاده قرار میگیرد. این خصوصیت از دو مقدار align-self
و justify-self
تشکیل شده است که به طور همزمان ترتیب موقعیت عناصر در هر دو جهت را مشخص میکند.
حالت end normal
به معنای ترکیب دو مقدار end
و normal
است. در اینجا، end
نشان دهندهی قرار دادن عنصر در لبهی راست سلول گرید در جهت افقی و به عنوان پیشفرض استفاده از مقدار پیشفرض برای موقعیت عمودی درون سلول گرید است.
در مثال ارائه شده، عنصر دوم با کلاس .item2
با استفاده از خصوصیت place-self: end normal;
در لبهی راست سلول گرید قرار میگیرد و در جهت عمودی به طور پیشفرض در بالای سلول قرار میگیرد.
<html>
<head>
<style>
.container {
background-color: red;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 100px;
grid-gap: 10px;
margin: 20px;
width: 300px;
}
.container > div {
background-color: greenyellow;
border: 3px solid blue;
text-align: center;
margin: 5px;
width: 60px;
height: 50px;
}
.item2 {
place-self: end normal;
}
</style>
</head>
<body>
<div class="container">
<div>Item 1</div>
<div class="item2">Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
</body>
start auto Value
در CSS، خصوصیت place-self
برای تنظیم موقعیت عناصر درون سلولهای شبکههای گرید مورد استفاده قرار میگیرد. این خصوصیت از دو مقدار align-self
و justify-self
تشکیل شده است که به طور همزمان ترتیب موقعیت عناصر در هر دو جهت را مشخص میکند.
حالت start auto
به معنای ترکیب دو مقدار start
و auto
است. در اینجا، start
نشان دهندهی قرار دادن عنصر در لبهی چپ سلول گرید در جهت افقی و به عنوان پیشفرض استفاده از مقدار پیشفرض برای موقعیت عمودی درون سلول گرید است.
در مثال ارائه شده، عنصر دوم با کلاس .item2
با استفاده از خصوصیت place-self: start auto;
در لبهی چپ سلول گرید قرار میگیرد و در جهت عمودی به طور پیشفرض در موقعیتی که توسط خود سلول گرید تعیین میشود، قرار میگیرد.
<html>
<head>
<style>
.container {
background-color: red;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 100px;
grid-gap: 10px;
margin: 20px;
width: 300px;
}
.container > div {
background-color: greenyellow;
border: 3px solid blue;
text-align: center;
margin: 5px;
width: 60px;
height: 50px;
}
.item2 {
place-self: start auto;
}
</style>
</head>
<body>
<div class="container">
<div>Item 1</div>
<div class="item2">Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
</body>
</html>
self-start auto Value
در CSS، خصوصیت place-self
برای تنظیم موقعیت عناصر درون سلولهای شبکههای گرید مورد استفاده قرار میگیرد. این خصوصیت از دو مقدار align-self
و justify-self
تشکیل شده است که به طور همزمان ترتیب موقعیت عناصر در هر دو جهت را مشخص میکند.
در مثال ارائه شده، self-start auto
به معنای ترکیب دو مقدار self-start
و auto
است. مقدار self-start
نشان دهنده قرار دادن عنصر در لبهی بالایی سلول گرید در جهت عمودی و استفاده از مقدار پیشفرض برای موقعیت افقی درون سلول گرید است.
بنابراین، در مثال مذکور، عنصر دوم با کلاس .item2
با استفاده از خصوصیت place-self: self-start auto;
در لبهی بالایی سلول گرید قرار میگیرد و در جهت افقی به طور پیشفرض در موقعیتی که توسط خود سلول گرید تعیین میشود، قرار میگیرد.
<html>
<head>
<style>
.container {
background-color: red;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 100px;
grid-gap: 10px;
margin: 20px;
width: 300px;
}
.container > div {
background-color: greenyellow;
border: 3px solid blue;
text-align: center;
margin: 5px;
width: 60px;
height: 50px;
}
.item2 {
place-self: self-start auto;
}
</style>
</head>
<body>
<div class="container">
<div>Item 1</div>
<div class="item2">Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
</body>
</html>
self-end normal Value
در CSS، خصوصیت place-self
برای تنظیم موقعیت عناصر درون سلولهای شبکههای گرید مورد استفاده قرار میگیرد. این خصوصیت از دو مقدار align-self
و justify-self
تشکیل شده است که به طور همزمان ترتیب موقعیت عناصر در هر دو جهت را مشخص میکند.
در مثال ارائه شده، self-end normal
به معنای ترکیب دو مقدار self-end
و normal
است. مقدار self-end
نشان دهنده قرار دادن عنصر در لبهی پایینی سلول گرید در جهت عمودی و استفاده از مقدار پیشفرض برای موقعیت افقی درون سلول گرید است.
بنابراین، در مثال مذکور، عنصر دوم با کلاس .item2
با استفاده از خصوصیت place-self: self-end normal;
در لبهی پایینی سلول گرید قرار میگیرد و در جهت افقی به طور پیشفرض در موقعیتی که توسط خود سلول گرید تعیین میشود، قرار میگیرد.
<html>
<head>
<style>
.container {
background-color: red;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 100px;
grid-gap: 10px;
margin: 20px;
width: 300px;
}
.container > div {
background-color: greenyellow;
border: 3px solid blue;
text-align: center;
margin: 5px;
width: 60px;
height: 50px;
}
.item2 {
place-self: self-end normal;
}
</style>
</head>
<body>
<div class="container">
<div>Item 1</div>
<div class="item2">Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
</body>
</html>
flex-start auto Value
در این قطعه کد، ما از خصوصیت place-self
با مقدار flex-start auto
استفاده کردهایم. این خصوصیت به ما امکان میدهد تا موقعیت عناصر درون سلولهای شبکهی فلکس را کنترل کنیم.
مقدار flex-start
به عنوان مقدار اول، عنصر را در لبه چپ (شروع) سلول فلکس قرار میدهد. این به این معنی است که عنصر به سمت چپ سلول فلکس تراز میشود.
مقدار auto
به عنوان مقدار دوم برای محور افقی اعمال میشود. با این مقدار، عنصر به طور خودکار در موقعیتی که توسط خود سلول فلکس تعیین میشود قرار میگیرد. به عبارت دیگر، عنصر در افقی به طور پیشفرض قرار میگیرد.
بنابراین، در این مثال، عنصر دوم با کلاس .item2
با استفاده از خصوصیت place-self: flex-start auto;
در لبه چپ (شروع) و بالا (شروع) سلول فلکس قرار میگیرد.
<html>
<head>
<style>
.container {
background-color: red;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 100px;
grid-gap: 10px;
margin: 20px;
width: 300px;
}
.container > div {
background-color: greenyellow;
border: 3px solid blue;
text-align: center;
margin: 5px;
width: 60px;
height: 50px;
}
.item2 {
place-self: flex-start auto;
}
</style>
</head>
<body>
<div class="container">
<div>Item 1</div>
<div class="item2">Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
</body>
</html>
flex-end normal Value
در این قطعه کد، از خصوصیت place-self
با مقدار flex-end normal
استفاده شده است. این خصوصیت به ما اجازه میدهد تا موقعیت عناصر درون سلولهای شبکه فلکس را کنترل کنیم.
مقدار flex-end
به عنوان مقدار اول، عنصر را در لبه راست (پایان) سلول فلکس قرار میدهد. این به این معنی است که عنصر به سمت راست سلول فلکس تراز میشود.
مقدار normal
به عنوان مقدار دوم برای محور عمودی اعمال میشود. با این مقدار، عنصر در موقعیت نرمال خود قرار میگیرد که به طور پیشفرض در حالت افقی به مرکز عمودی سلول فلکس میرود.
بنابراین، در این مثال، عنصر دوم با کلاس .item2
با استفاده از خصوصیت place-self: flex-end normal;
در لبه راست (پایان) و در وسط (نرمال) عمودی سلول فلکس قرار میگیرد.
<html>
<head>
<style>
.container {
background-color: red;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 100px;
grid-gap: 10px;
margin: 20px;
width: 300px;
}
.container > div {
background-color: greenyellow;
border: 3px solid blue;
text-align: center;
margin: 5px;
width: 60px;
height: 50px;
}
.item2 {
place-self: flex-end normal;
}
</style>
</head>
<body>
<div class="container">
<div>Item 1</div>
<div class="item2">Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
</body>
</html>
baseline normal Value
در این قسمت از کد، خاصیت place-self
با مقدار baseline normal
استفاده شده است. این خاصیت به ما این امکان را میدهد که موقعیت عناصر درون سلولهای شبکهی فلکس را کنترل کنیم.
مقدار baseline
به عنوان مقدار اول، عنصر را بر اساس خط پایه (baseline) سلول فلکس قرار میدهد. خط پایه (baseline) در واقع خطی است که مرکزیت متن در آن تعیین میشود. این به این معنی است که متن عنصر در سلول فلکس، بر اساس خط پایه آن قرار میگیرد.
مقدار normal
به عنوان مقدار دوم برای محور عمودی اعمال میشود. با این مقدار، عنصر به طور معمولی و به شیوهای استاندارد در موقعیتی که توسط خود سلول فلکس تعیین میشود قرار میگیرد.
بنابراین، در این مثال، عنصر دوم با کلاس .item2
با استفاده از خاصیت place-self: baseline normal;
در خط پایه سلول فلکس قرار میگیرد و در محور عمودی به طور معمولی و به شیوهای استاندارد قرار میگیرد.
<html>
<head>
<style>
.container {
background-color: red;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 100px;
grid-gap: 10px;
margin: 20px;
width: 300px;
}
.container > div {
background-color: greenyellow;
border: 3px solid blue;
text-align: center;
margin: 5px;
width: 60px;
height: 50px;
}
.item2 {
place-self: baseline normal;
}
</style>
</head>
<body>
<div class="container">
<div>Item 1</div>
<div class="item2">Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
</body>
</html>
last baseline normal Value
در این قطعه کد، خاصیت place-self
با مقدار last baseline normal
استفاده شده است. این خاصیت به ما امکان میدهد که موقعیت عناصر درون سلولهای شبکهی فلکس را کنترل کنیم.
مقدار last baseline
به عنوان مقدار اول، عنصر را بر اساس خط پایه (baseline) آخرین ردیف سلول فلکس قرار میدهد. خط پایه (baseline) در واقع خطی است که مرکزیت متن در آن تعیین میشود. این به این معنی است که متن عنصر در سلول فلکس، بر اساس خط پایه آخرین ردیف آن قرار میگیرد.
مقدار normal
به عنوان مقدار دوم برای محور عمودی اعمال میشود. با این مقدار، عنصر به طور معمولی و به شیوهای استاندارد در موقعیتی که توسط خود سلول فلکس تعیین میشود قرار میگیرد.
بنابراین، در این مثال، عنصر دوم با کلاس .item2
با استفاده از خاصیت place-self: last baseline normal;
در خط پایه آخرین ردیف سلول فلکس قرار میگیرد و در محور عمودی به طور معمولی و به شیوهای استاندارد قرار میگیرد.
<html>
<head>
<style>
.container {
background-color: red;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 100px;
grid-gap: 10px;
margin: 20px;
width: 300px;
}
.container > div {
background-color: greenyellow;
border: 3px solid blue;
text-align: center;
margin: 5px;
width: 60px;
height: 50px;
}
.item2 {
place-self: last baseline normal;
}
</style>
</head>
<body>
<div class="container">
<div>Item 1</div>
<div class="item2">Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
</body>
</html>
stretch auto Value
در این قسمت از کد، خاصیت place-self
با مقدار stretch auto
استفاده شده است. این خاصیت به ما این امکان را میدهد که موقعیت و اندازهٔ عناصر درون سلولهای شبکهٔ فلکس را کنترل کنیم.
مقدار stretch
برای محور عمودی اعمال میشود و به معنای کشیده شدن عنصر برای پر کردن ارتفاع در داخل سلول است. این به این معناست که ارتفاع عنصر تا اندازهٔ ارتفاع سلول تمدید میشود.
مقدار auto
برای محور افقی استفاده میشود و به این معناست که عرض عنصر به حداکثر اندازهٔ ممکن خود، براساس محتوای داخلی و نیازهای سلول، تنظیم میشود.
بنابراین، در این مثال، با استفاده از خاصیت place-self: stretch auto;
، عنصر دوم با کلاس .item2
در سلول فلکس خود کشیده شده و اندازهٔ افقی آن براساس محتوای داخلی و نیازهای سلول تنظیم میشود.
<html>
<head>
<style>
.container {
background-color: red;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 100px;
grid-gap: 10px;
margin: 20px;
width: 300px;
}
.container > div {
background-color: greenyellow;
border: 3px solid blue;
text-align: center;
margin: 5px;
width: 60px;
min-height: 50px;
}
.item2 {
place-self: stretch auto;
}
</style>
</head>
<body>
<div class="container">
<div>Item 1</div>
<div class="item2">Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
</body>
</html>
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام