CSS place-items 属性-之路教程

语法

place-items: auto | normal | start | end | flex-start | flex-end | self-start | self-end | center | left | right | baseline | first baseline | last baseline | stretch | initial | inherit;

place-items 属性的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      #container {
        height: 150px;
        width: 150px;
        place-items: flex-end;
        background-color: #ccc;
      }
      .flex {
        display: flex;
        flex-wrap: wrap;
      }
      div > div {
        box-sizing: border-box;
        border: 1px solid #666;
        width: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      #box1 {
        background-color: #1c87c9;
        min-height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Place-items 属性示例</h2>
    <h3>place-items: flex-end</h3>
    <div id="container" class="flex">
      <div id="box1">1</div>
    </div>
  </body>
</html>

具有“中心”值的 place-items 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题 </title>
    <style>
      #container {
        height: 200px;
        width: 230px;
        place-items: center;
        background-color: #ccc;
      }
      .flex {
        display: flex;
        flex-wrap: wrap;
      }
      div > div {
        box-sizing: border-box;
        border: 3px solid #ccc;
        width: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      #box1 {
        background-color: #666;
        min-height: 40px;
      }
      #box2 {
        background-color: #1c87c9;
        min-height: 50px;
      }
      #box3 {
        background-color: #fff;
        min-height: 40px;
      }
      #box4 {
        background-color: #ff0000;
        min-height: 60px;
      }
      #box5 {
        background-color: #eee;
        min-height: 70px;
      }
      #box6 {
        background-color: #8ebf42;
        min-height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Place-items 属性示例</h2>
    <div id="container" class="flex">
      <div id="box1">1</div>
      <div id="box2">2</div>
      <div id="box3">3</div>
      <div id="box4">4</div>
      <div id="box5">5</div>
      <div id="box6">6</div>
    </div>
  </body>
</html>

CSS place-items 属性值说明

值	描述
auto	如果框没有父级，或者绝对位置，则“自动”值表示“正常”。
normal	此值的效果取决于布局模式：在块级布局中，“正常”值表现类似于“开始”。在绝对定位的布局中，该值表现在更换绝对定位的盒子上的“开始”，以及所有其他绝对位置盒子上的拉伸。在表格单元格布局中，忽略此属性。在Flexbox布局中，忽略此属性。在网格布局中，除了具有宽高比的框或者其行为“开始”的内在尺寸之外，该值表现得像“拉伸”。
start	所有元素在容器的起始（左）边缘上相互定位。
end	所有元件在容器的结束（右）边缘上相互定位。
flex-start	物品放在容器的开头。
flex-end	物品放置在容器的末端。
self-start	允许项目（item）（item）根据自己的起点侧置于容器边缘上。
self-end	允许物品根据自己的结束侧放置在Docker边缘上。
center	物品彼此相邻地朝向容器的中心定位。
left	物品彼此靠近容器的左侧。如果属性的轴与内联轴不行，则此值表现类似于“结束”。
right	物品彼此靠近容器的右侧。如果属性的轴与内联轴不行，则此值表现类似于“开始”。
Baseline first-baseline last-baseline	通过匹配其对齐基线对齐组中的所有元素。
stretch	将元件垂直和水平拉伸到容器的两个边缘以适合容器。
initial	它使属性使用其默认值。
inherit	它从其父母元素继承了属性。

CSS place-items 属性

CSS place-items 属性是以下属性的简写：

align-items
justify-items

随着 Flexbox 和 Grid 布局的引入，上述属性得到了使用，但也适用于：

绝对定位的盒子
块级盒子
绝对定位框的静态位置
表格单元格

place-items 属性的行为取决于用户上下文。

查看下面不同上下文中 place-items 属性的行为。

初始值	normal legacy
应用于	所有元素。
继承	无效
可动画的	无效
版本	CSS3.
DOM 语法	object.Style.PlaceItemsw =“normal”;

日期：2020-06-02 22:14:44 来源：oir作者：oir

←CSS 透视属性

CSS ::placeholder 伪元素→

语法

place-items 属性的示例：

具有“中心”值的 place-items 属性示例：

CSS place-items 属性值说明

目录