带有flex框的输入组

Question

我正在开发Chrome扩展，这样我就可以使用诸如flexbox这样的尖端技术：

小提琴

HTML:

<label for="example-search">Classic search example</label>
<div class="input-wrapper">
    <input type="text" id="example-search" />
    <button>Search</button>
</div>

CSS (允许高亮显示柔性盒)：

.input-wrapper {
    display: flex;
    flex-flow: row nowrap;
}

.input-wrapper > input {
    flex: 1 1 auto;
}

.input-wrapper > button {
    flex-shrink: 0;
}

我有两个问题：

1. 这是使用柔性盒的正确方法吗？
2. 是否有一种方法来优雅地降级这个在网站上使用？

使用柔性箱生产：

我最近发现了一篇关于我的问题的好文章：现实世界中的柔性盒

来自atricle的未经加工的内奸：

• 使用自动重订器支持所有旧的桌面和移动浏览器(它们使用旧的柔性盒模型语法)
• 对IE8使用渐进增强-(参见文章中的设想3 )

Answer 1

除非您要覆盖其他地方设置的属性，否则没有理由使用这一行，因为这是所有flex容器的默认设置：

flex-flow: row nowrap;

如果您的目标是在浏览器上使用旧的Flexbox实现之一，那么有两件事需要注意：

• 2012年3月的草案(IE10)没有针对弹性增长、收缩或弹性基础的个别属性。控制它们的唯一方法是通过灵活的速记。
• 最初的草稿不允许你有不同的弹性收缩和弹性增长的价值。将flex: 1 1 auto转换为box-flex: 1是可以的，但是您不能翻译类似flex: 1 0的东西(带有前缀)。就您的目的而言，box-flex: 0应该可以工作(尽管您可能在旧Webkit浏览器中的按钮有问题，请参阅：https://stackoverflow.com/questions/16961192/flexbox-doesnt-work-with-buttons)。