# 6. 对齐容器中的所有项目
[toc]
## 6.1 属性
| 属性 | 描述 |
| ----------------- | ----------------------------------------------- |
| `justify-content` | 设置所有项目在容器中水平方向的对齐方式 |
| `align-content` | 设置所有项目在容器中垂直方向的对齐方式 |
| `place-content` | 简写:`place-content: 垂直对齐方式 水平对齐方式` |
---
## 6.2 示例
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>对齐容器中的所有项目</title>
<style>
.container {
width: 400px;
height: 400px;
background-color: wheat;
display: grid;
grid-template-columns: repeat(3, 50px);
grid-template-rows: repeat(3, 50px);
/* 当容器有剩余空间时,对所有项目设置对齐才有意义 */
/* 水平/行方向对齐方式 */
justify-content: start;
/* 垂直/列方向对齐方式 */
align-content: start;
/* 水平居右,垂直靠底部 */
justify-content: end;
align-content: end;
/* 水平垂直全部居中 */
justify-content: center;
align-content: center;
/* 水平二端对齐: 首尾项目贴边,中间项目空间相等 */
justify-content: space-between;
/* 水平分散对齐: 每个项目二侧空间相等 */
justify-content: space-around;
/* 水平平均对齐: 每个项目之间空间相等 */
justify-content: space-evenly;
/* 垂直二端对齐 */
align-content: space-between;
/* 垂直分散对齐 */
align-content: space-around;
/* 垂直没有平均对齐 */
align-content: space-evenly;
/* 水平垂直拉伸是默认值,为什么看不到效果呢?因为限制了单元素的大小,如果是弹性值就可以看到,例如auto / fr */
/* justify-content: stretch; */
/* align-content: stretch; */
/* 你可能注意到了,这二个属性与flex布局语法是一样的 */
/* 为了以示区别, 推荐工作中使用简写语法: place-content */
/* 语法: place-content: 垂直对齐方式 水平对齐方式; */
/* 例如: 垂直居中, 水平居左*/
place-content: center start;
/* 垂直居上, 水平居中 */
place-content: start center;
/* 垂直居中, 水平居中 */
place-content: center center;
/* 垂直水平值相等, 可只写垂直,水平复制该值 */
place-content: center;
}
.item {
background-color: violet;
font-size: 2rem;
}
</style>
</head>
<body>
<div class="container">
<span class="item item1">1</span>
<span class="item item2">2</span>
<span class="item item3">3</span>
<span class="item item4">4</span>
<span class="item item5">5</span>
<span class="item item6">6</span>
<span class="item item7">7</span>
<span class="item item8">8</span>
<span class="item item9">9</span>
</div>
</body>
</html>
```
- 教学大纲
- HTML5基础
- 1-html基础知识
- 2-语义化结构元素
- 3-语义化文本元素
- 4-链接/列表/图像元素
- 5-表格元素
- 6-表单与控件元素[重点]
- CSS3基础
- 1-css与html文档
- 2-css选择器
- 3-细说盒模型
- Flex布局[精简版]
- 1-Flex概论
- 2-Flex布局是什么
- 3-Flex基本概念
- 4-Flex容器属性
- 5-Flex项目属性
- Flex布局[细说版]
- 1-flex 布局概述
- 2-flex 容器与项目
- 3-flex 容器主轴方向
- 4-flex 容器主轴项目换行
- 5-flex 容器主轴与项目换行简写
- 6-flex 容器主轴项目对齐
- 7-flex 容器交叉轴项目对齐
- 8-flex 多行容器交叉轴项目对齐
- 9-flex 项目主轴排列顺序
- 10-flex 项目交叉轴单独对齐
- 11-flex 项目放大因子
- 12-flex 项目收缩因子
- 13-flex 项目计算尺寸
- 14-flex 项目缩放的简写
- Flex布局[案例版]
- 1-调整项目顺序
- Grid布局[精简版]
- 1. 常用术语
- 2. 容器属性
- 3. 项目属性
- 4. 布局实例
- 1. 经典三列布局
- 2. 媒体查询
- Grid布局[细说版]
- 1-必知术语
- 2-容器创建与行列划分
- 3-单元格常用单位
- 4-项目填充到单元格
- 5-项目填充到网格区域
- 6-对齐容器中的所有项目
- 7-对齐单元格中所有项目
- 8-对齐单元格中某个项目
- 9-容器中行与列之间的间距