CSS justify-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 | 将元件垂直和水平拉伸到容器的两个边缘以适合容器。 |
| safe | 如果项目（item）（item）的大小溢出对齐容器，则该项目（item）（item）将按对齐，好像开始对齐模式。 |
| unsafe | 无论项目（item）（item）的大小和对准容器如何，对准值都得到尊重。 |
| legacy | 使框后代继承的值。 |
| initial | 它使属性使用其默认值。 |
| inherit | 它从其父母元素继承了属性。 |
语法
justify-items: auto | normal | start | end | flex-start | flex-end | self-start | self-end | center | left | right | baseline | first baseline | last baseline | stretch | safe | unsafe | legacy | initial | inherit;
justify-items 属性的示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#example {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 5px;
justify-items: start;
background-color: #cccccc;
}
#example > div {
padding: 10px;
font-size: 20px;
color: white;
width: 100px;
height: 50px;
}
.one {
background-color: #1c87c9;
}
.two {
background-color: #8ebf42;
}
.three {
background-color: #666666;
}
</style>
</head>
<body>
<h2>Justify-items 属性示例</h2>
<div id="example">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
</body>
</html>
具有“中心”值的 justify-items 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#example {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 5px;
justify-items: center;
background-color: #cccccc;
}
#example > div {
padding: 10px;
font-size: 20px;
color: white;
width: 100px;
height: 50px;
}
.one {
background-color: #1c87c9;
}
.two {
background-color: #8ebf42;
}
.three {
background-color: #666666;
}
</style>
</head>
<body>
<h2>Justify-items 属性示例</h2>
<div id="example">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
</body>
</html>
具有“第一个基线”值的 justify-items 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.container {
display: grid;
padding-top: 10px;
height: 250px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
background: #ccc;
justify-items: first baseline;
}
.item {
width: 50%;
height: 50%;
text-align: center;
}
.item1 {
background: red;
}
.item2 {
background: blue;
}
.item3 {
background: green;
}
</style>
</head>
<body>
<h2>Justify-items 属性示例</h2>
<div class="container">
<div class="item1 item">1</div>
<div class="item2 item">2</div>
<div class="item3 item">3</div>
</div>
</body>
</html>
具有“self-end”值的 justify-items 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#example {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 5px;
justify-items: self-end;
background-color: #cccccc;
}
#example > div {
padding: 10px;
font-size: 20px;
color: white;
width: 100px;
height: 50px;
}
.one {
background-color: #1c87c9;
}
.two {
background-color: #8ebf42;
}
.three {
background-color: #666666;
}
</style>
</head>
<body>
<h2>Justify-items 属性示例</h2>
<div id="example">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
</body>
</html>
justify-items 属性定义了所有子框的默认 justify-self，为它们提供了沿适当轴对齐每个框的默认方式。
justify-items 属性随着 Flexbox 和 Grid 布局的引入而得到使用，但也适用于：
- 绝对定位的盒子
- 块级盒子
- 绝对定位框的静态位置
- 表格单元格
| 初始值 | legacy |
|---|---|
| 应用于 | 所有元素。 |
| 继承 | 无效 |
| 可动画的 | 无效 |
| 版本 | CSS3. |
| DOM 语法 | object.style.justifiitems =“start”; |
日期：2020-06-02 22:14:36 来源：oir作者：oir