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。