Css 简明教程

CSS - place-items Property

CSS place-items 是 CSS 网格布局中使用的一个简写属性，用于在一个声明中同时设置 link:css_align-items .html[align-items] 和 justify-items 属性。它允许你同时沿着块（列）轴和内联（行）轴对齐和调整网格容器中的网格项目

此属性是下列 CSS 属性的速记：

  1. align-items

  2. justify-items

Possible Values

  1. 一个 align-items 值同时在块和内联方向对齐。

  2. 一个对齐项目值设置块方向对齐，后跟 justify-items ，它指定内联对齐。

Applies To

所有元素。

Syntax

Keyword Values

place-items: center;
place-items: normal start;

Positional Alignment

place-items: center normal;
place-items: start legacy;
place-items: end normal;
place-items: self-start legacy;
place-items: self-end normal;
place-items: flex-start legacy;
place-items: flex-end normal;

Baseline Alignment

place-items: baseline normal;
place-items: first baseline legacy;
place-items: last baseline normal;
place-items: stretch legacy;

CSS place-items - Placing Items in a Grid Container

以下示例演示了 place-items 属性在网格布局中的不同行为 −

<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>

CSS place-items - Placing Items in a Flex Container

以下示例演示了 place-items 属性在 flex 布局中的不同行为 −

<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>