css之align-self的使用:

• 在介绍这个之前，有必要重新回顾及各知识点

cross axis(交叉轴) 和 main axis(主轴) 的关系，如果主轴是x,那么交叉轴就是y; 反过来，如果主轴是y，那么交叉轴就是x,
原文:
The cross axis in flexbox runs perpendicular to the main axis, therefore if your flex-direction is either row or row-reverse then the cross axis runs down the columns.
  
If your main axis is column or column-reverse then the cross axis runs along the rows.
  
参考: https://developer.mozilla.org/en-US/docs/Glossary/Cross_Axis

• align-self的作用

align-self CSS属性覆盖grid或flex项目的align-items值。在网格中，它在网格区域内对齐项目。在flexbox中，它在交叉轴上对齐项目。(重点是 覆盖)
  
原文:
The align-self CSS property overrides a grid or flex item's align-items value. In grid, it aligns the item inside the grid area. In flexbox, it aligns the item on the cross axis.

• 官方使用案例

1.html
<section>
  <div>Item #1</div>
  <div>Item #2</div>
  <div>Item #3</div>
</section>

2.css
section {
  display: flex;
  align-items: center;
  height: 120px;
  background: beige;
}

div {
  height: 60px;
  background: cyan;
  margin: 5px;
}

div:nth-child(3) {
  align-self: stretch;
  background: pink;
}

效果就是Item #3 会在section这个box的顶部开始布局，二其它两个则是垂直剧中

• 常用属性值(还有其它的，但是我认为不常用)

align-self: center; /* Put the item around the center */
align-self: start; /* Put the item at the start */
align-self: end; /* Put the item at the end */

• 特别注意两个特别属性值

align-self: auto; // Computes to the parent's align-items value.
align-self: normal; //For flex items, the keyword behaves as stretch.