sass - 删除离子幻灯片上的填充物

Question

我想删除 ion-slide 内项目的填充。通过设置背景颜色，我发现它必须来自那里，如图所示：

我想删除绿色区域。

<ion-content >
  <ion-slides style="background-color: #976914d0" >
  <ion-slide *ngFor="let channel of channels" style="background-color: #0c8831d0">
    <div class="flex-container">
        <br/>
        <h1 class="title-top"> {{channel.name}} </h1>
...

以及到目前为止我对 scss 的尝试：

.ios, .md {

page-home {
    ion-slide { 
        margin: 0 0 0 0 !important;
        padding: 0 0 0 0 !important; 
    }

    .flex-container {
        flex-basis:100% !important;
        overflow: auto;
        height: 100% !important;
        background-color: #3498db;

        //height: 100%;
        //display: flex; /* or inline-flex */
        flex:1;
        //align-content: space-between;
        justify-content: space-around;
        flex-direction: column;
        //flex-grow: 1;
        border: solid 5px #000000 ;
    }

[编辑] 我应该提到在 flex-container 中我可以设置 height: 600px; 它可以制作更大的物品，但它不便携。和 height: 100% 什么都不做。

Answer 1

.slide-zoom {
    height: 100%
}

为我工作。看看 Ionic 演示源：

https://github.com/ionic-team/ionic-preview-app/tree/master/src/pages/slides/basic

Answer 2

我找到了一些解决方法，但它并不完美。它删除了顶部的空间，但我仍然无法将容器大小设置为自动调整到 Windows...我覆盖了 ion-slide 上的一些配置。我看到另一个嵌套在 ion-slide 中的类；滑轨。我还没有尝试过所有的配置...

    ion-slides {
        height: auto !important;
      }

    .flex-container {
        //height: 100% !important;
        display: flex;
        flex-direction: column;
        height: 500px;
        justify-content: space-between;
        border: solid 5px #000000 ;

    }

[编辑]终于得到了正确答案，补充：

.scroll-content {
display: flex;
flex-direction: column;

ion-slides {
    display: flex;
}
}

Answer 3

在 flexbox 中，值应该是flex-start属性align-self。

鉴于您当前的配置，请从以下内容开始：

.flex-container {
    align-self: flex-start;
}