前言

简单介绍一下来源吧！最近在部分技术群里面都会有人在问关于flex的讨论和使用，而我刚好在不知多久以前无意中看到京东关于flex的使用方式，所以在这里总结一下分享出来！

一.直接上源码

这里就不过多的解释,需要深入了解的自行百度或者其他方式。下面简单介绍一下用法吧！

.mui-flex {
	display:-webkit-box!important;
	display:-webkit-flex!important;
	display:-ms-flexbox!important;
	display:flex!important;
	-webkit-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
}
.align-center {
	-webkit-box-align:center;
	-webkit-align-items:center;
	-ms-flex-align:center;
	align-items:center;
}
.mui-flex>.cell {
	-webkit-box-flex:1;
	-webkit-flex:1;
	-ms-flex:1;
	flex:1;
	width:0;
	-webkit-flex-basis:0;
	-ms-flex-preferred-size:0;
	flex-basis:0;
	max-width:100%;
	display:block;
	padding:0!important;
	position:relative;
}
.mui-flex>.cell.fixed {
	-webkit-box-flex:0!important;
	-webkit-flex:none!important;
	-ms-flex:none!important;
	flex:none!important;
	width:auto;
}
.mui-flex>.cell.align-center {
	-webkit-align-self:center;
	-ms-flex-item-align:center;
	align-self:center;
}

应用场景

1.每个单元适应

<div class="mui-flex">
    <div class="cell">
       1
    </div>
    <div class="cell">
       2
    </div>
    .
    .
    .
    .
</div>

2.固定一个单元，让其他自适应（例如：水平方向上的图文排定，固定一列，另一列自适应）

<div class="mui-flex">
    <div class="cell fixed">
       1
    </div>
    <div class="cell">
       2
    </div>
</div>

3.让子元素垂直方向上居中

<div class="mui-flex align-center">
    <div class="cell">
       1
    </div>
    <div class="cell">
       2
    </div>
</div>

4.让某一个子元素垂直方向上居中

<div class="mui-flex">
    <div class="cell align-center">
       1
    </div>
    <div class="cell">
       2
    </div>
</div>

总结

这是一个很简单的例子，只是工作中遇到分享出来，并没有太高的技术含量，需要深入了解自然要移步到专业的博客或者网站，这里只是搬砖！