نوشتن نظر کلیک کنید

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، ترتیب بندی و تنظیمات قرارگیری آیتم‌ها درون این کانتینر فلکس تعیین می‌شود.

با توجه به مقادیر مختلف 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>

CSS – قرار دادن موارد (Place Items)

Placing Items in a Grid Container

Placing Items in a Flex Container

پست های مرتبط

مطالعه این پست ها رو از دست ندین!

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

CSS – قرار دادن موارد (Place Items)

Placing Items in a Grid Container

Placing Items in a Flex Container

پست های مرتبط

مطالعه این پست ها رو از دست ندین!

Python – محدود کردن داده (MongoDB Limit)

Python – بروزرسانی (MongoDB Update)

Python – حذف کالکشن (MongoDB Drop Collection)

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید