7-對齊單元格中所有項目 · 前端教學筆記[更新中...]

# 7. 對齊單元格/區域中所有項目 [toc] ## 7.1 屬性 | 序號 | 屬性 | 描述 | | ---- | --------------- | ------------------------------------------------- | | 1 | `justify-items` | 設置所有項目在單元格/網格區域中水平方向的對齊方式 | | 2 | `align-items` | 設置所有項目在單元格/網格區域中垂直方向的對齊方式 | | 3 | `place-items` | 簡寫, `place-items: 垂直對齊方式水平對齊方式` | --- ## 7.2 示例 1: 對齊單元格中所有項目 ![](https://img.kancloud.cn/58/cc/58cc3691a6e0905309bbda00fd24aecf_1182x1216.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, 1fr); grid-template-rows: repeat(3, 1fr); /* 項目在單元格的對齊方式,默認是拉伸,除非設置了項目大小,否則會占據單元格全部空間 */ justify-items: stretch; align-items: stretch; /* 水平居左,垂直居中 */ justify-items: start; align-items: center; /* 水平居右, 垂直居下 */ justify-items: end; align-items: end; /* 水平垂直居中 */ justify-items: center; align-items: center; /* 這二個屬性與flex彈性布局中的屬性相同,為了區別, 建議使用簡寫語法 */ /* 簡寫語法: place-items: 垂直對齊水平對齊 */ /* 垂直靠上,水平居右 */ place-items: start end; /* 垂直靠下, 水平居左 */ place-items: end start; /* 垂直居中, 水平居中 */ place-items: center center; /* 二個值一樣,同樣可以簡寫成一個值 */ place-items: center; } .item { width: 50px; height: 50px; 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> ``` --- ## 7.3 示例 2: 對齊網格區域中所有項目 ![](https://img.kancloud.cn/7d/2a/7d2a72f33a59177e80d39ac12b7f8092_1214x1260.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, 1fr); grid-template-rows: repeat(3, 1fr); /* 所有項目在網格區域中垂直水平對齊 */ place-items: center; } .item { width: 50px; height: 50px; background-color: violet; font-size: 2rem; } .item1 { /* 跨3行,占據最左一列 */ grid-row-end: span 3; } .item2 { background-color: lightskyblue; /* 水平跨2行,垂直跨2列,占據一塊四個單元格組成的矩形網格區域 */ grid-row-end: span 2; grid-column-end: span 2; } </style> </head> <body> <div class="container"> <span class="item item1">1</span> <span class="item item2">2</span> </div> </body> </html> ```