css Flexbox的-fallback.css

Posted 2021-05-13

// 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();
	});

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