각도 4 FlexBox IE10

Question

Chrome, FireFox 및 MS Edge에서 작동하는 다음 html div 코드가 있지만 IE10에서는 서로 겹쳐서 출력됩니다. 기본적으로 3 개의 flexbox 열 div가 오름차순으로 표시됩니다.

작동중인 브라우저에서 레이아웃은 내가 원하는 것입니다. IE10 문제를 해결할 수있는 방법입니까? 고맙습니다.

<div class="container"> 
    <div fxLayout="column" fxLayoutAlign="center center" style="text-align:center" > 
    <div fxFlex="grow" fxFlexAlign="center" *ngIf="QrCode && !QrCompleted"> 
    {{DisplayCode}} 
    </div> 
    <div fxFlex fxFlexAlign="center" *ngIf="loginCode && !loginCompleted"> 
     <p>Display Count: {{cnt}} </p> 
     <h1>Get Login Code from SMS to Login</h1> 
     <p> {{errorMessage}} </p> 
    </div> 
    </div> 
    <div fxLayout="column" fxLayoutAlign="center center" *ngIf="LoginCompleted"> 
    <div fxFlex="grow" > 
      <button style="height:50px; width:200px" (click)="onClick()">Click for New Code</button> 
    </div> 
</div> 
<div fxLayout="column" fxLayoutAlign="center center" > 
    <div fxFlex="grow" > 
    <a href="https://www.example.com/store" target="_blank"> 
      <img src="../assets/companylogo.svg" alt="Logo" height="100px" width="400px" > 
    </a> 
    </div>  
</div> 
</div> 

Answer 1

유연성을 사용할 수 있습니다. flexbox가 구식 브라우저에서도 작동 할 수있는 polyfill입니다. https://www.npmjs.com/package/flexibility