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> ```