#align-self

原理如同 align-items,但是仅仅作用于一个 flexbox 元素,而不是作用于所有的元素

默认属性 align-self: auto;

元素使用 align-items 的值。

align-self: flex-start;

如果容器有属性 align-items: center目标元素 有属性 align-self: flex-start,那么仅仅目标元素对齐于纵向轴的起始处。

默认,这就意味着元素对齐于垂直方向的顶部

align-self: flex-end;

如果容器有属性 align-items: center目标元素 有属性 align-self: flex-end,那么仅仅目标元素对齐于纵向轴的末尾处。

默认,这就意味着元素对齐于垂直方向的底部

align-self: center;

如果容器有属性 align-items: flex-start目标元素 有属性 align-self: center,那么仅仅目标元素对齐于纵向轴的中间。

默认,这就意味着元素对齐于垂直方向的中间

align-self: baseline;

如果容器有属性 align-items: center目标元素 有属性 align-self: baseline,那么仅仅目标元素对齐于纵向轴的 baseline。

默认,这就意味着元素沿着文字的 baseline 对齐。

align-self: stretch;

如果容器有属性 align-items: center目标元素 有属性 align-self: stretch,那么仅仅目标元素拉伸填充于整个纵向轴。