我正在尝试使用弹性盒模型创建输入机制。我知道并非所有浏览器都支持它，但在这种情况下并不重要。它真的只需要在 web-kit 浏览器上工作。
我正在尝试构建一个不错的两列布局，而不需要使用特定的宽度。我在标签和输入上都将 flex 属性设置为一个。但是，正如您所看到的，当标签元素变长时，它会弄乱它旁边的输入的宽度。
我希望标签和输入在列下的宽度相同，但我希望它们随着窗口/设备大小的变化而增长和缩小。
有没有办法做到这一点而不必width在任何一个元素上设置 a ？
更新
我可以将max-width标签元素上的 a 设置为 5%，我基本上得到了想要的效果。但是，我仍然想知道是否有一种方法可以在不设置任何宽度并仅使用弹性框的情况下做到这一点？
这是一个工作的jsFiddle。
您提供的示例根本没有列，只是有列的外观。如果没有实际的列，您将不得不设置宽度以使这 3 个不相关的块看起来它们以某种方式连接。
您应该使用新的 CSS3 Flexible Box 语法，现在是 'flex' 而不是 'box'。请参阅规范：http ://www.w3.org/TR/css3-flexbox/有了这个，您可以将元素设置<grow> <shrink> <default width>为 1 1 50%，因此它们将以相同的速度增长和收缩，并且每个都需要最多可用宽度的 50%（您可以调整它或使其为 60/40 或其他）。
示例 JSFiddle：http: //jsfiddle.net/XTa98/4/
否则，如果您想要实际的列以便不必设置宽度，则需要将所有标签包装在它们自己的“列”div 中，并将所有输入包装在它们自己的“列”div 中。
JSFiddle：http: //jsfiddle.net/XTa98/5/
这有实际的列并且没有设置宽度，但它不再优雅地降级，因为元素不在它们自己的行中。为了缓解这种情况，您可以随时提供text-overflow: ellipses截断文本。
在任何情况下，你都有一个权衡。如果您想要列的外观而不实际使用列，则需要设置某种类型的宽度。否则，您可以使用真正的列，但元素不再作为行连接，并且您需要在缩小浏览器宽度时考虑溢出。
您不必将元素包装在列 div 中以避免设置宽度。只需将每个标签和输入设置为 flex:1，您就会让它们平均划分宽度。但是，在这种情况下，这实际上与将每个宽度设置为 50% 相同，所以我不确定它到底有什么优势。