Question

我正在使用一个Ionic应用程序和Flexbox，我试图以一种方式定位我的元素，以便它能够响应所有不同的设备和屏幕尺寸（Android和iOS）。

所以我把这个离子滑动盒装在里面。正如您可以从下面的图像中看到幻灯片指示器和文本＆＃34;下一步＆＃34;在iPhone 5上看起来不错，但在iPhone 6 Plus（以及所有其他Android和iPhone设备）上看不到。

所以基本上我想给div一个固定的位置，这样它在所有设备上看起来都是正确的。我尝试将margin-top: auto应用于div和class＆＃34; contentCardSlider＆＃34;但它不会位于卡的底部。

HTML code：

<ion-slide-box on-slide-changed="slideChanged(index)" show-pager="false">
                <ion-slide>
                    <div class="card-wrap">
                        <div class="card full-card">    
                                <div class="wrapperCardSlider">

                                        <div class="contentCardSlider">
                                            <h4 class="customSlider">{{slideIndex + 1}}/{{total}}</h4>
                                            <button class="button button-positive button-clear no-animation btnNext" ng-click="goToBase2()" ng-show="slideIndex == 11">NEXT</button> 
                                        </div><!-- end contentCardSlider -->

                                </div><!-- end wrapperCardSlider -->

                                <img src="img/innerShapedFooter.png" width="960" height="560" class="innerShapeBase">

                        </div><!-- end full-card -->
                    </div><!-- end card-wrap -->
                </ion-slide>
            </ion-slide-box>

CSS代码：

.slider {
  height: 100%;
}

.scroll{
  height: 100% !important;
}

.card-wrap{
    height: 100% !important;
    display: -webkit-box!important ;
    display: -moz-box!important ;
    display: -ms-flexbox!important ;
    display: -webkit-flex!important ;
    display: flex!important ;
}

.full-card {
    flex: 1 !important;
    display: -webkit-box !important ;
    display: -moz-box !important ;
    display: -ms-flexbox !important ;
    display: -webkit-flex !important ;
    display: flex !important ;
    -webkit-flex-direction: column !important ;
    -ms-flex-direction: column !important ;
    flex-direction: column !important ;
    -webkit-box-align: center !important ;
    -moz-box-align: center !important ;
    -webkit-align-items: center !important ;
    -ms-flex-align: center !important ;
    align-items: center !important ;
}

.wrapperCardSlider{
    z-index:100;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.contentCardSlider{
  margin-top: auto
}

.customSlider{
    color: black;
    font-size:14px;
    text-align:center;
    padding-top:155px;
}

.btnNext{
    color: black !important;
    font-weight:bold;
    text-align:center;
}

.innerShapeBase{
    margin-top:auto;
}

使用Flexbox（Ionic）对齐元素底部

0 个答案: