`align-self`属性允许单个项目有与其他项目不一样的对齐方式，可覆盖`align-items`属性。默认值为`auto`，表示继承父元素的`align-items`属性，如果没有父元素，则等同于`stretch`。 ~~~css .item { align-self: auto | flex-start | flex-end | center | baseline | stretch; } ~~~  该属性可能取6个值，除了`auto`，其他都与`align-items`属性完全一致。 ~~~html <div class="box"> <div class="box-item">1<div>(flex-shrink: 0)</div></div> <div class="box-item start">2</div> <div class="box-item">3</div> <div class="box-item end">4</div> </div> ~~~ ~~~css .box { display: flex; background-color: white; } .box-item { width: 200px; height: 200px; line-height: 200px; vertical-align: middle; margin: 5px; background-color: #ffd200; font-size: 100px; color: white; text-align: center; } .box-item div { font-size: 14px; position: relative; top: -150px; } .box { height: 400px; align-items: center; } .start { align-self: flex-start; } .end { align-self: flex-end; } ~~~