Question

所以我有一个包含2个块的块，其中block1占用了90％的空间，block2占用了大约10％的空间。这在大多数浏览器中都可以正常工作，但是在IE 11中，block1占用了太多的空间（~97％），这隐藏了大部分的block2。如下面的代码所示，这是flex：1和flex：0。但是，如果我将值更改为flex：10和flex：0，则所有浏览器都可以正常工作。

.block1 {
    flex: 1;  // --> 9
}

.block2 {
    flex: 0;  // --> 1
}

所以我的问题;有什么理由我应该避免这种方法吗？如果是这样，什么是更好的解决方案？

对于我们正在处理的事情的某些背景;它是一个水平拉伸的通知栏，带有主要文本消息和关闭按钮。

可怕的重建：

                                   Centered text                                    [Close]

Answer 1

为什么不简单地使用display: flex使用简单的10％到90％比例的sharings？

PRO TIP：使用flex-grow时，您应该在flexed元素中包含另一个内容包装器（如果它应该具有固定宽度），以避免内容挤压。 / p>

这可能是特定于浏览器的前缀问题。我建议您使用 Auto-Prefixer plugin 与您选择的编辑器。不好的是，Flex-box的前缀太多了，无法统一跨浏览器处理。因此，如果您使用SASS，我会建议您使用像 Bourbon.io 这样的mixin库，它会为您生成所有前缀权重。

如果您不这样做，那么我建议您开始学习Flexbox附带的 prefix mess 。

Answer 2

使用flex: 0 0 10%将10％分配给block2，然后使用flex: 1

将剩余的空间分配给块1

演示

＆＃13;

.wpr {
  display: flex;
  height: 100px;
}
.block1 {
  flex: 1;
  background: aqua;
}
.block2 {
  flex: 0 0 10%;
  background: tomato;
}

＆＃13;

<div class="wpr">
  <div class="block1">block 1</div>
  <div class="block2">block 2</div>
</div>

＆＃13;

是否应避免使用大型flexbox灵活值？

2 个答案: