Flexbox IE align-self

Question

일부 레이아웃에서는 flexbox를 사용하고 있습니다.

<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 :

나는이 HTML을

#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; 
} 

내가 크롬에서 원하는 모양을 얻을 수 있지만, 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에서 작동합니다.