Flex 1:1 不适用于 Ionic 网格。我需要分配 space 50:50

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 space 上面设计的分配吗？

Answer 1

要使 flex: 1 属性正常工作，其父项必须具有属性 display: flex 默认情况下，display: flex 显示它的子项在一行中，这就是我们需要将方向更改为列

的原因

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

Answer 2

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

很遗憾，我目前无法测试我的解决方案，但我会执行以下操作：

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

这样，两个项目都将从 height: 0 开始，弹性增长会将剩余的 space 平均分配给两行

Flex 1:1 不适用于 Ionic 网格。我需要分配 space 50:50

Flex 1:1 is not working with Ionic grid. I need to allocate the space 50: 50

html

css

flexbox

angular

ionic4