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

float 导致整个 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;
}