css flexbox equal height columns not working

问题

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.

回答1:

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

来源：https://stackoverflow.com/questions/16100015/css-flexbox-equal-height-columns-not-working

标签

css

css3

flexbox