Flex Box模型的双列输入

Question

我正在尝试使用flex box模型创建输入机制。我知道所有浏览器都不支持它，但在这种情况下并不重要。它实际上只需要在web-kit浏览器上工作。

我正在尝试构建一个漂亮的两列布局，而无需使用特定的宽度。我在标签和输入上都将flex属性设置为1。但是，正如您所看到的，当标签元素变长时，它会混淆旁边输入的宽度。

我希望标签和输入的宽度与列的宽度相同，但我希望它们随着窗口/设备大小的变化而增大和缩小。

有没有办法在不必在任何一个元素上设置width的情况下执行此操作？

更新

我可以将标签元素上的max-width设置为5％，我基本上可以获得所需的效果。但是，我仍然想知道是否有办法在没有设置任何宽度的情况下使用纯粹的弹性盒进行此操作？

Here是一个有效的jsFiddle。

Answer 1

您提供的示例根本没有列，只有列的外观。如果没有实际的列，则必须设置宽度以使这3个未释放的块看起来以某种方式连接。

你应该使用新的CSS3 Flexible Box语法，现在是'flex'而不是'box'。查看规范：http://www.w3.org/TR/css3-flexbox/使用此功能，您可以将元素设置为{1}} <grow> <shrink>为1 1 50％，因此它们会以相同的速率增长和缩小并且每个将占用可用宽度的50％（你可以调整它或使它成为60/40或其他）。

示例JSFiddle：http://jsfiddle.net/XTa98/4/

否则，如果您想要实际的列以便不必设置宽度，则需要将所有标签包装在它们自己的“column”div中，并将所有输入包装在它们自己的“column”div中。< / p>

JSFiddle：http://jsfiddle.net/XTa98/5/

这有实际的列而没有设置宽度，但它不再优雅地降级，因为元素不在它们自己的行中。为了减轻这种情况，您可以始终提供<default width>来截断文本。

无论如何，你需要权衡。如果要在不实际使用列的情况下显示列的外观，则需要设置某种类型的宽度。否则，您可以使用实际列，但元素不再作为行连接，您需要在缩小浏览器宽度时考虑溢出。

Answer 2

您不必将列div中的元素包装起来以避免设置宽度。只需将每个标签和输入设置为flex：1，您就可以将它们平均分配宽度。然而，这实际上与将每个设置为50％宽度相同，在这种情况下，所以我不确定它真正具有什么优势。