使用弹性盒子让一个行内元素垂直居中于未知高度的块内,并让左侧高度根据右侧内容自动撑开

<div class="photoIntroduce">
	<ul>
	    <li>
			<p>
											            <label>品 名</label>
										</p>
										<span>PP聚丙烯（百褶叫）</span>
									</li>
									<li>
										<p>
											<label>品 牌</label>
										</p>
										<span>丙纶；聚丙烯前卫；丙纶短纤维；聚丙烯短纤</span>
									</li>
									<li>
										<p>
											<label>特 性</label>
										</p>
										<span>开腐蚀性开腐蚀性开腐蚀性开腐蚀性开腐蚀性开腐蚀性开腐蚀性开腐蚀性开腐蚀性开腐蚀性开腐蚀性开腐蚀性开腐蚀性开腐蚀性开腐蚀性开腐蚀性开腐蚀性开腐蚀性开腐蚀性</span>
									</li>
									<li>
										<p>
											<label>应用范围</label>
										</p>
										<span>丙纶；聚丙烯前卫；丙纶短纤维；聚丙烯短纤</span>
									</li>
								</ul>
							</div>

.photo .photoIntroduce>ul>li{
	zoom:1;
	height:100%; 
	overflow:hidden;
	margin-top:10px;
	display: flex;
	align-items: stretch;
}
.photo .photoIntroduce>ul>li:first-child{
	margin-top:0px;
}
.photo .photoIntroduce>ul>li>p{
	float: left;
	width: 160px;
	min-height: 58px;
	text-align: center;
	border-radius: 3px 0 0 3px;
	font-weight: bold;
	font-size: 20px;
	background: linear-gradient(39deg,#6ebfce,#a7e0d0);
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}

使用table布局做垂直居中会与弹性盒子自适应高度冲突,

使用弹性盒子可以做自适应高度:display: flex; align-items: stretch;  在父元素设置;

使用弹性盒子做垂直居中:display: flex;justify-content: center;align-items: center;;在父元素设置