8-flex 多行容器交叉軸項目對齊 · 前端教學筆記[更新中...]

# flex 多行容器交叉軸項目對齊 ## 1. `align-content`屬性 - 該屬性僅適用于: 多行容器 - 多行容器中, 交叉軸會有多個項目, 剩余空間在項目之間分配才有意義 | 序號 | 屬性值 | 描述 | | ---- | --------------- | ------------------------------------------------ | | 1 | `stretch`默認 | 項目拉伸占據整個交叉軸 | | 1 | `flex-start` | 所有項目與交叉軸起始線(頂部)對齊 | | 2 | `flex-end` | 所有項目與交叉軸終止線對齊 | | 3 | `center` | 所有項目與交叉軸中間線對齊: 居中對齊 | | 4 | `space-between` | 兩端對齊: 剩余空間在頭尾項目之外的項目間平均分配 | | 5 | `space-around` | 分散對齊: 剩余空間在每個項目二側平均分配 | | 6 | `space-evenly` | 平均對齊: 剩余空間在每個項目之間平均分配 | > 提示: 多行容器中通過設置`flex-wrap: wrap | wrap-reverse`實現 --- ## 2. 示例 ![](https://img.kancloud.cn/69/84/6984039e84c9abaaf1f049531a2425e8_410x245.jpg) ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>flex 多行容器交叉軸項目對齊</title> <style> /* 容器尺寸 */ .container { width: 300px; height: 150px; } /* flex容器 */ .container { display: flex; } /* 多行容器 */ .container { flex-wrap: wrap; } /* flex 多行容器交叉軸項目對齊*/ /* 當多行容器中交叉軸方向上存在剩余空間時, 該屬性才有意義 */ /* align-content屬性僅適用于: 多行容器 */ .container { /* 默認: 項目拉伸占據整個交叉軸 */ /* 你看到項目在交叉軸下部有空白,是因為當前項目設置了固定高度 */ align-content: stretch; /* 所有項目與交叉軸起始線(頂部)對齊 */ align-content: flex-start; /* 所有項目與交叉軸終止線對齊 */ align-content: flex-end; /* 所有項目與交叉軸中間線對齊: 居中對齊 */ align-content: center; /* 多行容器中, 交叉軸上可能有多個項目, 剩余空間的分配才有意義*/ /* 兩端對齊 */ align-content: space-between; /* 分散對齊 */ align-content: space-around; /* 平均對齊 */ align-content: space-evenly; } /* flex項目 */ .item { width: 50px; height: 50px; background-color: lightcyan; font-size: 1.5rem; } </style> </head> <body>  <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> </div> </body> </html> ```