javascript - CSS 在 Angular Ionic App 上第二次重新排列

Question

我正在构建一个 Angular&ionic 应用程序，在 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;                     
    }