6-对齐容器中的所有项目 · 前端教学笔记[更新中...]

# 6. 对齐容器中的所有项目 [toc] ## 6.1 属性 | 属性 | 描述 | | ----------------- | ----------------------------------------------- | | `justify-content` | 设置所有项目在容器中水平方向的对齐方式 | | `align-content` | 设置所有项目在容器中垂直方向的对齐方式 | | `place-content` | 简写:`place-content: 垂直对齐方式水平对齐方式` | --- ## 6.2 示例 ![](https://img.kancloud.cn/b1/14/b114e7e744b9c2aee9db23878be7c771_1210x1158.jpg) ```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> ```