CSS3中的layout module是CSS2.1中未曾擁有過的強大功能。其中一個新的layout property是“align-self”。該屬性可以讓我們控制flexbox布局中每一個flex項的對齊方式。

.item {
align-self: flex-start | flex-end | center | baseline | stretch;
}

這個屬性需要放置在flex容器中的子項上。如果子項還在flex容器中，其它flexbox屬性會同時作用于子項，比如justify-content和flex-wrap等等。

align-self的值與align-items相似，不過align-items是針對整個flex容器的。而align-self是針對某個單獨的flex項的，即改變單個子項的對齊方式。

flex-start會將該項與flex容器的最左側對齊，flex-end則是與最右側對齊，center是將其居中對齊，baseline是將該項的基線與其它flex項的文本基線對齊，而stretch會使該項充滿整個flex容器的高度。

比如說，當有一個flex容器容納了三個子項時，align-self:flex-start就會將其中一個子項放在左側，而不是默認的居中對齊。這在需要對齊樣式進行一些特殊設定的時候相當有用。

.flex-container {
display: flex;
align-items: center;
}
.flex-item:nth-child(2) {
align-self: flex-start;
}

以上代碼將把align-items值設為“center”并讓第二個子項的align-self屬性值為“flex-start”。這樣就會產生一個在中間的項目和一個在頂部的項目的效果。