CSS Flexbox等高度列不工作 [英] css flexbox equal height columns not working

问题描述

我试图让css3 flexbox工作（第一次）使高度相同的列（对于那些支持它的浏览器）。

我已经看到了各种各样的这是我的代码（后面跟着一个jsfiddle链接）

 < DIV> < p>< p>< p> a< p>< p>< p>< p>< p>< p> / p为H.< /跨度> 
< span> col2< / span> 
< span> col3< / span> 
< / div> 
 
 div {background：red;向左飘浮; 
 -webkit-display：flex; 
 -moz-display：flex; 
 display：flex; 
} 
 span {display：block;背景：黄色;向左飘浮;宽度：100像素; margin：0 10px; 
 -webkit-flex：1; 
 -moz-flex：1; 
 flex：1; 
 
  

http://jsfiddle.net/38kbV/

任何指针都将不胜感激。

浮动是导致整个东西在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; 
显示：-moz-box; 
 display：-webkit-flexbox; 
 display：-ms-flexbox; 
 display：-webkit-flex; 
 display：flex; 
} 
 
 span {
 display：block; 
背景：黄色; 
 float：left; 
 width：100px; 
 margin：0 10px; 
 -webkit-box-flex：1; 
 -moz-box-flex：1; 
 -webkit-flex：1; 
 -ms-flex：1; 
 flex：1; 
} 
  

I am trying to get css3 flexbox working (for the first time) to make equal height columns (for those browsers that support it).

I have seen various examples across the web but I cant get any to work.

Here is my code (followed by a jsfiddle link)

<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/

Any pointers would be greatly appreciated.

解决方案

The float is causing the entire thing to fall apart in Firefox. If you need it to appear inline with other content, you'll need to use the inline display property instead (inline-flex, inline-flexbox, inline-box).

When you're following the modern Flexbox draft, you need to stick with all of the properties that belong to that draft. If you try to mix and match, they won't work as expected. There are 3 different drafts that have been implemented in various browsers, each with different property names and values (see: 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等高度列不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！