Flexbox IE align-self

Question

I'm using flexbox for some layout.

I have this 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>

And the relevant 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;
}

I can get the look I want in Chrome, but IE10 doesn't seem to place the icon to the bottom right corner (click to see images):

Chrome

IE10

Answer 1

It turns out that align-self is not what I needed.

Changed the css to:

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

And it now works in IE10.