CSS – قرار دادن موارد (Place Items)
خصوصیت CSS place-items
یک خصوصیت مختصر است که در CSS Grid Layout برای تنظیم همزمان خصوصیتهای align-items
و justify-items
در یک اعلان استفاده میشود. این اجازه را به شما میدهد تا آیتمهای شبکه را در داخل کانتینر شبکه در هر دو جهت بلوک (ستون) و شطرنجی (ردیف) همزمان ترتیب دهید و متناسب با هم بچینید.
این ویژگی یک مختصر برای خصوصیات CSS زیر است:
align-items
justify-items
مقادیر ممکن:
یک مقدار تنها align-items
در هر دو جهت بلوک و شطرنجی را تنظیم میکند.
یک مقدار align-items
جهت تنظیم ترتیب بلوک، پس از آن justify-items
، که ترتیب را در جهت شطرنجی مشخص میکند.
Placing Items in a Grid Container
این کد HTML و CSS یک نمونه از نحوه عملکرد مختلف خصوصیت place-items
در طرح شبکه را نشان میدهد. در این کد، یک کنترل کشویی با گزینههای مختلف place-items
قرار داده شده است، و با تغییر مقدار این کنترل، ترتیب بندی آیتمهای شبکه درون کانتینر شبکه تغییر میکند.
در اینجا یک شبکه با طرح 3 ستون و ارتفاع و عرض مشخص (با grid-template-columns
و height
و width
) تعریف شده است. سپس با استفاده از place-items
، ترتیب بندی و تنظیمات قرارگیری آیتمها درون این شبکه تعیین میشود.
همچنین با استفاده از JavaScript، هنگامی که مقدار کنترل کشویی place-items
تغییر میکند، مقدار placeItems
که تعیینکننده خصوصیت مورد نظر در CSS است، نیز تغییر میکند.
با توجه به مقادیر مختلف place-items
که در کنترل کشویی انتخاب میشوند، ترتیب بندی و تنظیمات مختلفی برای آیتمهای شبکه درون کانتینر شبکه اعمال میشود، از جمله تنظیمات مربوط به موقعیت عمودی و افقی، مانند start
، center
، end
، و stretch
و ترکیبهای آنها.
<html>
<head>
<style>
div > div {
box-sizing: border-box;
border: 2px solid blue;
}
.row {
margin-bottom: 20px;
}
select {
padding: 2px;
background-color: yellow;
border-radius: 10px;
color: blue;
}
#grid-container {
height: 400px;
width: 350px;
place-items: start;
background-color: red;
display: grid;
grid-template-columns: repeat(3, 100px);
}
#grid-container > div {
width: 60px;
min-height: 60px;
padding: 5px;
margin: 5px;
}
.gridItem1 {
background-color: greenyellow;
}
.gridItem2 {
background-color: violet;
}
</style>
</head>
<body>
<div class="row">
<label for="place-items-values">place-items: </label>
<select id="place-items-values">
<option value="start">start</option>
<option value="center">center</option>
<option value="end">end</option>
<option value="stretch">stretch</option>
<option value="center normal">center normal</option>
<option value="normal start">normal start</option>
<option value="center normal">center normal</option>
<option value="start legacy">start legacy</option>
<option value="end normal">end normal</option>
<option value="self-start legacy">self-start legacy</option>
<option value="self-end normal">self-end normal</option>
<option value="flex-start legacy">flex-start legacy</option>
<option value="flex-end normal">flex-end normal</option>
<option value="baseline">baseline</option>
<option value="first baseline legacy">first baseline legacy</option>
<option value="last baseline">last baseline</option>
<option value="stretch legacy">stretch legacy</option>
</select>
</div>
<div id="grid-container">
<div class="gridItem1">Grid Item 1</div>
<div class="gridItem2">Grid Item 2</div>
<div class="gridItem1">Grid Item 3</div>
<div class="gridItem2">Grid Item 4</div>
<div class="gridItem1">Grid Item 5</div>
</div>
<script>
const values = document.getElementById("place-items-values");
const container = document.getElementById("grid-container");
values.addEventListener("change", () => {
container.style.placeItems = values.value;
});
</script>
</body>
</html>
Placing Items in a Flex Container
این کد HTML و CSS یک نمونه از نحوه عملکرد مختلف خصوصیت place-items
در طرح فلکس را نشان میدهد. در این کد، یک کنترل کشویی با گزینههای مختلف place-items
قرار داده شده است، و با تغییر مقدار این کنترل، ترتیب بندی آیتمهای فلکس درون کانتینر فلکس تغییر میکند.
در اینجا یک کانتینر فلکس با ارتفاع و عرض مشخص تعریف شده است، و آیتمهای داخل آن به صورت فلکس و با استفاده از flex-wrap: wrap;
در چند ردیف و ستون قرار میگیرند. سپس با استفاده از place-items
، ترتیب بندی و تنظیمات قرارگیری آیتمها درون این کانتینر فلکس تعیین میشود.
همچنین با استفاده از JavaScript، هنگامی که مقدار کنترل کشویی place-items
تغییر میکند، مقدار placeItems
که تعیینکننده خصوصیت مورد نظر در CSS است، نیز تغییر میکند.
با توجه به مقادیر مختلف place-items
که در کنترل کشویی انتخاب میشوند، ترتیب بندی و تنظیمات مختلفی برای آیتمهای فلکس درون کانتینر فلکس اعمال میشود، از جمله تنظیمات مربوط به موقعیت عمودی و افقی، مانند start
، center
، end
، و stretch
و ترکیبهای آنها.
<html>
<head>
<style>
div > div {
box-sizing: border-box;
border: 2px solid blue;
display: flex;
}
.row {
margin-bottom: 20px;
}
select {
padding: 2px;
background-color: yellow;
border-radius: 10px;
color: blue;
}
#flex-container {
height: 350px;
width: 350px;
align-items: start;
background-color: red;
display: flex;
flex-wrap: wrap;
}
#flex-container > div {
width: 60px;
min-height: 60px;
padding: 5px;
margin: 5px;
}
.flexItem1 {
background-color: greenyellow;
}
.flexItem2 {
background-color: violet;
}
</style>
</head>
<body>
<div class="row">
<label for="place-items-values">place-items: </label>
<select id="place-items-values">
<option value="start">start</option>
<option value="center">center</option>
<option value="end">end</option>
<option value="stretch">stretch</option>
<option value="center normal">center normal</option>
<option value="normal start">normal start</option>
<option value="center normal">center normal</option>
<option value="start legacy">start legacy</option>
<option value="end normal">end normal</option>
<option value="self-start legacy">self-start legacy</option>
<option value="self-end normal">self-end normal</option>
<option value="flex-start legacy">flex-start legacy</option>
<option value="flex-end normal">flex-end normal</option>
<option value="baseline">baseline</option>
<option value="first baseline legacy">first baseline legacy</option>
<option value="last baseline">last baseline</option>
<option value="stretch legacy">stretch legacy</option>
</select>
</div>
<div id="flex-container">
<div class="flexItem1">Flex Item 1</div>
<div class="flexItem2">Flex Item 2</div>
<div class="flexItem1">Flex Item 3</div>
<div class="flexItem2">Flex Item 4</div>
<div class="flexItem1">Flex Item 5</div>
<div class="flexItem2">Flex Item 6</div>
<div class="flexItem1">Flex Item 7</div>
</div>
<script>
const values = document.getElementById("place-items-values");
const container = document.getElementById("flex-container");
values.addEventListener("change", () => {
container.style.placeItems = values.value;
});
</script>
</body>
</html>
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام