# 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-容器中行與列之間的間距