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;
}

css flexbox等高度列不起作用

1 个答案: