flex弹性布局-换行平分一行

示例

<div class="nav">
  <div class="nav-li">11</div>
  <div class="nav-li">22</div>
  <div class="nav-li">33</div>
</div>
 
Css: 
.nav{
 display:inline-block;
    /* Firefox */
    display:-moz-box;
    -moz-box-orient:horizontal;
    /* Safari, Opera, and Chrome */
    display:-webkit-box;
    -webkit-box-orient:horizontal;
    /* W3C */
    display:box;
    box-orient:horizontal;
}
.nav-li{
height: 40px;
line-height: 40px;
-webkit-box-flex: 1.0;
-moz-box-flex:1.0;
 box-flex:1.0;
}

平分一行

/*ul*/  
.flex{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}
 
/*li 平均分配*/  
.flex .flex_item{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}

不管添加多少行都是平分

换行平分

.list{
    display: flex;
    flex-flow: row wrap;
}
.item{
    flex: 0 0 25%;
}

换行平分

.list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between; 
	text-align: center;
	position: relative;
	width: 750px;
	border:1px solid red;
 }
.item{
	border: 1px solid #CACACA;
	color: #888;
	font-size: 15px;
	width: 180px; 
	margin-top:20px;
	margin-bottom:20px; 
	text-align: center; 
	align-items:center;
 }
 .item:not(:nth-child(3n)){
	margin-right: 68px;
}
.list:after {
	content: "";
	flex: auto;
}

html结构

<div class="list">
	<div class="item">
		全部
	</div>
	<div class="item">
		全部
	</div>
	<div class="item">
		全部
	</div>
	<div class="item">
		全部
	</div>
	<div class="item">
		全部
	</div>
	<div class="item">
		全部
	</div>
	<div class="item">
		全部
	</div>
	<div class="item">
		全部
	</div>
	<div class="item">
		全部
	</div>
	<div class="item">
		全部
	</div>
 </div>

针对微信小程序画table

.tr{
    display: flex;
}
.td{
    flex-shrink: 0;  
    width: 200rpx;
}

换行平分比如一行三个显示两行

.product-list{
	display: flex;
	flex-wrap: wrap;
	justify-content: start;
	position: relative;
	margin: 0 20rpx;
	.product-item{
		flex: 0 0 210rpx;
		margin-left: 20rpx;
		&:nth-child(3n+1){
			margin-left: 0rpx; 
		}
		.img{
			width: 210rpx;
			height: 210rpx;
		}
	}
}