css - css flexbox等高列不起作用

Question

我试图让 css3 flexbox 工作（第一次）以制作等高的列（对于那些支持它的浏览器）。

我在网上看到了各种例子，但我无法工作。

这是我的代码（后面是 jsfiddle 链接）

<div>
    <span><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p></span>
    <span>col2</span>
    <span>col3</span>
</div>

div { background:red; float:left;
-webkit-display:flex;
-moz-display:flex;
display:flex;
}
span { display:block; background:yellow; float:left; width:100px; margin:0 10px;
-webkit-flex:1;
-moz-flex:1;
flex:1;
} 

http://jsfiddle.net/38kbV/

任何指针将不胜感激。

Answer 1

浮动导致整个事情在 Firefox 中分崩离析。如果您需要它与其他内容内联显示，则需要使用内联显示属性（inline-flex、inline-flexbox、inline-box）。

当您遵循现代 Flexbox 草案时，您需要坚持属于该草案的所有属性。如果您尝试混合搭配，它们将无法按预期工作。在各种浏览器中实现了 3 种不同的草案，每种都有不同的属性名称和值（参见：https ://gist.github.com/cimmanon/727c9d558b374d27c5b6 ）

http://tinker.io/11122/2

div {
  background: red;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

span {
  display: block;
  background: yellow;
  float: left;
  width: 100px;
  margin: 0 10px;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}