Question

我有以下元素：

<div style="display: flex; flex-direction: row;">
   <div style="flex 1 1 calc(50% - 20px);" [repeated-n-times]> <!-- I don't want to use calc() here. But I'm looking for the same effect. -->
      <!-- some other markup -->
   </div>
</div>

基本上，我想从calc属性中删除flex-basis部分。最后一个来自速记语法。

为什么呢？您可能知道，IE11在calc属性中遇到flex-basis一些问题，另一方面，我们在应用程序中使用@angular/flex-layout模块，我们正在寻找一个解决方法使IE11中的布局看起来很好（部分）。

这可行吗？

Answer 1

这是IE的弹性错误之一，因此如果您使用简写flex-basis，calc()将正常工作。

＆＃13;

div > div {
  background: lightgray;
  margin: 10px;
}

＆＃13;

<div style="display: flex; flex-direction: row;">
   <div style="flex-grow: 1; flex-basis: calc(50% - 20px);"> test
   </div>
   <div style="flex-grow: 1; flex-basis: calc(50% - 20px);"> test
   </div>
</div>

＆＃13;

根据评论更新

评论中指出@angular/flex-layout将longhand flex合并为速记，因此在这种情况下，这3个选项中的一个可以提供帮助

告诉Angular不合并（如果可能）
添加一个类并将其CSS设置为flex-basis: calc(50% - 20px) !important;
_{需要!important来覆盖内联样式}
使用width: calc(50% - 20px); ^注1

_注1

根据您实际使用flex-basis的方式，在许多情况下width也会这样做。

以下是解释其差异的绝佳答案：

What are the differences between flex-basis and width?

更新2

如果您可以放弃flex-grow: 1，则可以执行此操作

＆＃13;

<div style="display: flex; flex-direction: row;">
  <div style="flex: 0 1 50%; margin: 0 10px; background: lightgray;"> test
  </div>
  <div style="flex: 0 1 50%; margin: 0 10px; background: lightgray;"> test
  </div>
</div>

＆＃13;

有没有办法从＆＃34; flex-basis：calc（50％ - 20px）＆＃34;取代计算部分。与其他财产？

1 个答案: