Fork me on GitHub

通过Display:box构建自动响应式多列布局

父节点:

display: -webkit-flex;
 -webkit-flex-flow: row;
 -webkit-align-items: stretch;
 -webkit-justify-content: space-between;
 /*IE10还不支持*/
 display: -ms-flex;
 -ms-flex-flow: row wrap;
 -ms-align-items: stretch;
 -ms-justify-content: space-between;
 display: flex;
 flex-flow: row;
 align-items: stretch;
 justify-content: space-between;
子节点:
-webkit-flex: 1;
 -moz-flex: 1;
 flex: 1;
切换js:
$('.service .left ul li').click(function(){
 $(this).addClass('active').siblings().removeClass('active');
 $('.service .right>section:eq('+$(this).index()+')').fadeIn().siblings("section").hide()
})
支持作者