justify-content与justify-items与常用属性

**CSS布局属性之justify-content与justify-items**

在CSS中，`justify-content` 和 `justify-items` 是两个非常重要的布局属性，它们可以帮助我们控制元素的排列方式。这些属性尤其是在Flexbox布局中发挥着关键作用。

### justify-content`justify-content` 属性用于设置flex容器中的项目的水平对齐方式。当flex容器的宽度小于或等于flex项总宽度时，它会帮助我们决定如何排列这些项目。这个属性可以取以下值：

* `flex-start`:项目从左边开始排列。
* `flex-end`:项目从右边开始排列。
* `center`:项目居中排列。
* `space-between`:项目之间有等间距，第一个项目紧靠容器的左边，最后一个项目紧靠容器的右边。
* `space-around`:项目之间有等间距，第一个项目和最后一个项目都有一定距离。
* `space-evenly`:项目之间有等间距，每个项目都有一定距离。

css/* flex-start */
.container {
 display: flex;
 justify-content: flex-start;
}

.item1 {
 width:100px;
 height:50px;
 background-color: red;
}

.item2 {
 width:150px;
 height:75px;
 background-color: blue;
}

/* flex-end */
.container {
 display: flex;
 justify-content: flex-end;
}

.item1 {
 width:100px;
 height:50px;
 background-color: red;
}

.item2 {
 width:150px;
 height:75px;
 background-color: blue;
}

/* center */
.container {
 display: flex;
 justify-content: center;
}

.item1 {
 width:100px;
 height:50px;
 background-color: red;
}

.item2 {
 width:150px;
 height:75px;
 background-color: blue;
}

### justify-items`justify-items` 属性用于设置flex项的水平对齐方式。这个属性可以取以下值：

* `stretch`: flex项拉伸以填满容器。
* `center`: flex项居中排列。
* `flex-start`: flex项从左边开始排列。
* `flex-end`: flex项从右边开始排列。

css/* stretch */
.container {
 display: flex;
 justify-items: stretch;
}

.item1 {
 width:100px;
 height:50px;
 background-color: red;
}

.item2 {
 width:150px;
 height:75px;
 background-color: blue;
}

/* center */
.container {
 display: flex;
 justify-items: center;
}

.item1 {
 width:100px;
 height:50px;
 background-color: red;
}

.item2 {
 width:150px;
 height:75px;
 background-color: blue;
}

### 总结`justify-content` 和 `justify-items` 是两个非常重要的布局属性，它们可以帮助我们控制元素的排列方式。在Flexbox布局中，`justify-content` 用于设置flex容器中的项目的水平对齐方式，而 `justify-items` 用于设置flex项的水平对齐方式。这些属性可以取不同的值来实现不同的排列效果。

### 参考* [MDN Web Docs - justify-content]( />* [MDN Web Docs - justify-items](