Question

.scss

.content {
    ion-grid {
        height: 100% !important;
    }
    .row1 {
        flex: 1 !important;
    }
    .row2 {
        flex: 1 !important;
    }
}

.html

<ion-content class="content">
  <ion-grid>
    <ion-row class="row1">
      <ion-col size="12">
          S-Works Venge Disc – SRAM eTAP
      </ion-col>
    </ion-row>
    <ion-row class="row2">
      <ion-col size="12">
        <ion-row>
          <ion-col size="12">
            S-Works Venge Disc – SRAM eTAP
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col size="12">
            Availability : Upon Request
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col size="12">
            About
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col size="12">
            We aren't satisfied with second fastest. Hello, why do you think we have our own Win Tunnel and the motto,
            "Aero is Everything?" We live and breathe aero, because we know that aerodynamic optimization is the best
            thing we can do to make you faster. And this philosophy has never been truer than with the new Venge. Being
            eight seconds faster than the ViAS, it’s not only the most aerodynamic bike on the road, but it’s also lost
            460 grams. And now with SRAM RED eTAP, you’re definitively looking at the new shape of speed.
          </ion-col>
        </ion-row>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

结果：

问：您能告诉我为什么我看不到上述设计的50:50空间分配吗？

Answer 1

要使flex: 1属性起作用，其父级必须具有属性display: flex 默认情况下，display: flex连续显示其子级，这就是为什么我们需要将方向更改为列

ion-grid {
    display: flex;
    flex-direction: column;
    height: 100% !important;
}

Answer 2

据我所知，问题似乎出在速记flex: 1上。 Flex速记在不同的浏览器中可能会有些棘手。

不幸的是，目前我无法测试我的解决方案，但我会执行以下操作：

.row1,
.row2 {
  flex-basis: 0;
  flex-grow: 1;
}

这样，两个项目都将从height: 0开始，而flex growth将把剩余空间平均分配给两行

Flex 1：1不适用于离子网格。我需要分配50：50的空间

2 个答案: