10-flex 項目交叉軸單獨對齊 · 前端教學筆記[更新中...]

# flex 項目交叉軸單獨對齊 ## 1. `align-self`屬性 - 該屬性可覆蓋容器的`align-items`, 用以自定義某個項目的對齊方式 | 序號 | 屬性值 | 描述 | | ---- | ------------ | ------------------------------ | | 1 | `auto`默認值 | 繼承 `align-items` 屬性值 | | 2 | `flex-start` | 與交叉軸起始線對齊 | | 3 | `flex-end` | 與交叉軸終止線對齊 | | 4 | `center` | 與交叉軸中間線對齊: 居中對齊 | | 5 | `stretch` | 在交叉軸方向上拉伸 | | 6 | `baseline` | 與基線對齊(與內容相關用得極少) | --- ## 示例 ![](https://img.kancloud.cn/4e/60/4e609e72779fbc947a549a565a1bfa5c_394x252.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; } /* flex項目 */ .item { width: 50px; height: 50px; background-color: lightcyan; font-size: 1.5rem; /* align-self默認值 */ align-self: auto; } /* 自定義項目對齊方式 */ .item:first-of-type { background-color: lightgreen; /* 項目與容器等高, 否則看到不拉伸效果 */ height: inherit; /* 項目拉伸以適應容器 */ align-self: stretch; } .item:nth-of-type(2) { background-color: yellow; /* 項目對齊到容器起始線*/ /*看不到效果是因為容器的`align-itmes默認就是flex-start */ align-self: flex-start; } .item:nth-of-type(3) { background-color: pink; /* 項目對齊到容器交叉軸終止線 */ align-self: flex-end; } .item:last-of-type { background-color: lightskyblue; /* 項目對齊到容器交叉軸中間線 */ align-self: center; } </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> </body> </html> ```