Skip to content

Instantly share code, notes, and snippets.

@roine
Created January 29, 2013 08:47
Show Gist options
  • Save roine/4662772 to your computer and use it in GitHub Desktop.
Save roine/4662772 to your computer and use it in GitHub Desktop.
/* normal flexbox */
.flexbox .flex-container {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: flex;
}
.flexbox .flex-container.vertical {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: flex;
-webkit-flex-flow: column wrap;
-moz-flex-flow: column wrap;
-ms-flex-flow: column wrap;
-ms-flex-direction: column;
-ms-flex-wrap: wrap;
flex-flow: column wrap;
}
.flexbox .flex-item {
-webkit-flex:1 auto;
-moz-flex:1 auto;
-ms-flex:1 auto;
flex:1 auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding:10px 15px;
position:relative;
margin-right: 20px;
}
/* flexbox fallback for ie 8+ */
.no-flexbox .flex-container{
display:inline-block;
}
.no-flexbox .flex-container.vertical{
}
.no-flexbox .flex-item{
display: inline-block;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding:10px 20px;
position:relative;
}
/* old flexbox */
.no-flexbox.flexboxlegacy .flex-container {
display: -webkit-box;
display: -moz-box;
display: box;
}
.no-flexbox.flexboxlegacy .flex-container.vertical {
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
}
.no-flexbox.flexboxlegacy .flex-item {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding:10px 20px;
position:relative;
}
// http://stackoverflow.com/questions/11306736/jquery-check-if-element-has-a-specific-style-property-defined-inline
$.fn.inlineStyle = function (prop) {
var styles = this.attr("style"),
value;
styles && styles.split(";").forEach(function (e) {
var style = e.split(":");
if ($.trim(style[0]) === prop) {
value = style[1];
}
});
return value;
};
function setWidth(){
$('.no-flexbox .flex-container').not('.vertical').each(function(){
var $el = $(this),
widthPerBox = Math.ceil(100/$el.find('> .flex-item').length);
$el.children('.flex-item').each(function(){
if($(this).attr('data-width') !== undefined ){
$(this).css('width', $(this).data('width')+'%');
}
// do not overwrite the actual width
else if(!$(this).inlineStyle('width')){
$(this).css('width', widthPerBox+'%');
}
});
});
}
// there is a problem while setting width and height at same time
// so I'm setting width then height
function setHeight(){
$('.no-flexbox .flex-container').not('.vertical').each(function(){
var $el = $(this),
maxHeight = 0;
$el.children('.flex-item').each(function(){
// set height auto to reset the height
$(this).css('height', 'auto');
if($(this).height() > maxHeight){
maxHeight = $(this).outerHeight();
}
});
// makes sure maxHeight is not equal to 0
if(maxHeight){
$el.find(' >.flex-item').css('height', maxHeight);
}
});
}
$(document).ready(function(){
setWidth();
setHeight();
});
$(window).resize(function(){
setHeight();
});
@davidkassa
Copy link

Any details or tutorial on how to use this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment