Flexbox align-self 被忽略答案

【问题标题】：Flexbox align-self being ignoredFlexbox align-self 被忽略
【发布时间】：2017-06-07 02:06:18
【问题描述】：

align-self 的文档指出：

align-self CSS 属性对齐当前 flex 行的 flex 项目，覆盖 align-items 值。

但是，这不会发生：

.example {
  display: flex;
  align-items: center;
  border: 1px solid blue;
  height: 8ex;
}

.example > div {
  border: 1px solid red;
}

#a > div:last-child {
  align-self: top;
}

#b > div:last-child {
  align-self: center;
}

#c > div:last-child {
  align-self: bottom;
}

<body>
<div id="a" class="example"><div>1</div><div>2</div></div>
<div id="b" class="example"><div>1</div><div>2</div></div>
<div id="c" class="example"><div>1</div><div>2</div></div>
</body>

文档还说：

如果任何项目的交叉轴边距设置为自动，则 align-self 将被忽略。该属性不适用于块级框或表格单元格。

但是，这些都不起作用：

将margin:0 显式添加到子divs。
将display:inline 添加到子divs。
将divs 更改为spans。

为什么align-self 不起作用？

【问题讨论】：

feature-request: 可以否决您自己的问题。

标签： html css flexbox

【解决方案1】：

top 和 bottom 不是 align-self 的有效值。请改用flex-start 和flex-end：

.example {
  display: flex;
  align-items: center;
  border: 1px solid blue;
  height: 8ex;
}

.example > div {
  border: 1px solid red;
}

#a > div:last-child {
  align-self: flex-start;
}

#b > div:last-child {
  align-self: center;
}

#c > div:last-child {
  align-self: flex-end;
}

<body>
<div id="a" class="example"><div>1</div><div>2</div></div>
<div id="b" class="example"><div>1</div><div>2</div></div>
<div id="c" class="example"><div>1</div><div>2</div></div>
</body>

【讨论】：

啊，谢谢。我想我太专注于align-items 和开头的那段，以至于我没有注意到这些选项无效。现在我有点想对我自己的问题投反对票。太棒了，谢谢！