离子含量下离子卡的全宽答案

【问题标题】：Full width to the ion cards under the ion-content离子含量下离子卡的全宽
【发布时间】：2018-12-20 17:18:07
【问题描述】：

我需要给离子卡一个全宽。这有效：

ion-card{
        display: flex;
        flex-direction: column;
        width: 100% !important;
        margin: 0 !important;
      }

但我只需要将其限制为ion-content 的孩子。所以尝试了这个。但它不起作用。即它删除了卡片的整个宽度。有什么线索吗？

 ion-content>ion-card{
        display: flex;
        flex-direction: column;
        width: 100% !important;
        margin: 0 !important;
      }

html

<ion-header>
 <ion-card>
      <h2>Notifications Area1</h2>
  </ion-card>
</ion-header>

    <ion-content>
      <ion-card>
        <h2>Notifications Area2</h2>
      </ion-card>
    </ion-content>

注意：我不需要为ion-header 卡片应用全宽。

【问题讨论】：

子 100% 的宽度是父的 100%，如果父不会有 100%，那么它的子也是。
哦.. 抱歉，我没听懂你说的。你能给出一个代码示例我该怎么做？ @ItayGal
jsfiddle.net/dew0cLxq 你很接近，只需将> 替换为空格即可
我想也许你没有在你的例子中使用离子框架。使用 ionic 并且在设备上 > 无法正常工作。 @ReSedano
@Sampath 啊，好吧！很高兴知道。谢谢:-)

标签： html css angular sass ionic3

【解决方案1】：

这将是您的解决方案：删除 > 并将其更改为 blank space。

这里有一些解释为什么要使用blank space，

element 元素，<div> <p> 选择 <div> 元素中的所有 <p> 元素，

element>element <div> > <p> 选择父元素为<div>元素的所有<p>元素

在你的情况下，空格效果更好。

ion-card{
        display: flex;
        flex-direction: column;
        margin: 0 !important;
        background: blue;
        width: 500px;
      }
ion-content{
  background: green;
}
ion-content ion-card{
  background: yellow!important;
  width: 100%;
}

<ion-content>
  <ion-card>
    <h2 text-center margin-top>Notifications Area</h2>
  </ion-card>
</ion-content>

<ion-card>
    <h2 text-center margin-top>Notifications Area</h2>
  </ion-card>

【讨论】：

【解决方案2】：

我稍微修改了 HTML 和 CSS 的格式。

HTML

<div class="ion-content">
  <div class="ion-card">
   <h2 class="text-center margin-top">Notifications Area</h2>
  </div>
</div>

CSS

.ion-content {
   display: flex;
   flex-direction: column;
   width: 100%;
   background: grey;
   height: 500px;
}



.ion-card {
    flex-basis: 100%;
}

h2 {
   color: blue;  
}

您可以在此处查看一个工作示例。 https://codepen.io/Angel-SG/pen/aPpWVM

【讨论】：

【解决方案3】：

ion-content {

    ion-card {
        display: flex;
        flex-direction: column;
        width: 100% !important;
        max-widht : 100% !important;
        margin: 0 !important;
    }
}

试试这个，我希望它会工作......！

【讨论】：