CSSは角型イオンアプリケーションで2回目の並べ替えを行います

Question

角度のある&イオンアプリをChromeのデバッグに使用していますが、これはうまくいきますが、展開すると最初のインスタンスではうまく見えますが、戻って、ページに戻って、CSSが乱れているようだ。

最初のインスタンス： first instance

second (notice the icons in the middle):

私のhtml： `

<div class="infoButtons"> 
        <div> 
         <i class="icon ion-icon-location positive" ></i> 
         <p>{{event.location}} <br> {{event.city}}</p> 
        </div> 

        <div id="priceBtn" ng-show="{{event.price}}" style="padding-right:10%;"> 
         <i class="icon ion-icon-shekel positive" id="nisIcon"></i> 
         <p><span>שׁ״ח&nbsp</span>{{event.price}}</p> 
        </div> 

        <div> 
         <i class="ion-icon-17 positive" style="margin-bottom:3%"></i> 
         <p>{{event.date}} <br> {{event.hour}}</p>    
        </div>   
       </div> 

      </div> 

私SCSS（すべてのコミット）：`

.infoButtons{ 
    display: flex !important; 
    justify-content: space-around !important; 
    padding-right:10% !important; 

    div{ 

     margin-bottom: 10%; 
     margin-top: 5%; 
     margin-right:10% !important; 
     margin-left:10% !important; 
     display: flex !important; 
     flex-direction: column !important; 
     align-items: center !important; 
     height:70px !important; 

     i{ 
      font-size: 30px; 
      font-weight: 100; 
      margin-bottom: 3%; 

     } 

     p{ 
      text-align: center!important; 
      white-space: nowrap !important; 
      font-size:13px;      
     } 

    } 

    #priceBtn{ 
     p{ 
      display: flex; 
     } 
    } 

} 

助けてください！ おかげ

Answer 1

それを試してみてください。

.infoButtons{ 
    display: flex !important; 
    justify-content: space-around !important; 
} 
.infoButtons div{ 
    flex-grow: 0.33; 
    flex-basis: 33%; 

    height: 70px !important; 
    text-align: center; 
    height:70px !important; 

    i{ 
     font-size: 30px; 
     font-weight: 100; 
     margin-bottom: 3%; 

    } 

    p{ 
     text-align: center!important; 
     white-space: nowrap !important; 
     font-size:13px;      
    }