Flexbox IE align-self

Question

我正在使用flexbox进行布局。

我有这个HTML：

<article>
 <h3>Lorem ipsum dolor sit amet</h3>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed faucibus posuere felis in pellentesque. Donec malesuada dolor in sapien egestas dictum. Ut volutpat nulla magna.</p>
 <span class="push-right academic">&nbsp;</span>
</article>

相关的CSS：

#work-items article {
 background: #dddddd;
 width: 32%;
 padding: 10px;
 display: -ms-flexbox;
 -ms-flex-align: center;
 -ms-flex-pack: start;
 -ms-flex-line-pack: stretch;
 -ms-flex-direction: column;
 -ms-flex-wrap: nowrap;
 display: flex;
 align-items: center;
 justify-content: flex-start;
 flex-flow: column nowrap;
}

#work-items article .push-right {
 align-self: flex-end;
 padding: 5px;
 -ms-flex-item-align: end;
}

#work-items article .push-right.academic {
 background: url("../img/academic-black.png");
 width: 32px;
 height: 23px;
}

我可以在Chrome中看到我想要的外观，但IE10似乎没有将图标放在右下角（点击查看图片）：

Chrome

IE10

Answer 1

事实证明，align-self不是我所需要的。

将css更改为：

#work-items article .push-right {
 margin-top: auto;
 margin-left: auto;
 padding: 5px;
 display: inline-block;
}

它现在可以在IE10中使用。