align-self

描述

适用于：flex子项

CSS 属性 align-self 会对齐当前 grid 或 flex 行中的元素，并覆盖已有的 align-items 的值。

在grid布局中，它会对齐grid area区域的子项。

在flex弹性盒子布局中，会按照侧轴方向（当前 flex 元素排列方向的垂直方向）进行排列。

取值

• auto

  如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。

• flex-start

  弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

• flex-end

  弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

• center

  弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

• baseline

  如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

• stretch

  如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

语法

/* Keyword values */
align-self: auto;
align-self: normal;

/* Positional alignment */
/* align-self does not take left and right values */
align-self: center; /* 把子项放在中间 */
align-self: start;  /* 把子项放在起始位置 */
align-self: end;    /* 把子项放在结点位置 */
align-self: self-start; /* Align the item flush at the start */
align-self: self-end;   /* Align the item flush at the end */
align-self: flex-start; /* 把flex子项放到起始位置 */
align-self: flex-end;   /* 把flex子项放到结点位置 */

/* Baseline alignment */
align-self: baseline;
align-self: first baseline;
align-self: last baseline;
align-self: stretch; /* Stretch 适配子项到容器大小 */

/* Overflow alignment */
align-self: safe center;
align-self: unsafe center;

/* Global values */
align-self: inherit;
align-self: initial;
align-self: unset;