`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; } ~~~