H5頁面如何進行等分佈局？

問題拋出

衆所周知，flex佈局可以使得一行元素等分排布，但是有時候我們的需求並不是每一行的元素都是等分排布，比如應該設置成下面都樣式：

解決思路 & 實現

一、不使用flex佈局

1、彈性佈局flex此時不再適用，因爲彈性佈局是會使得每一行都是根據div的個數n進行將每一個div都均分1/n的寬度。
2、使用div佈局，且必須設置成行內塊（inlne-block）的形式。因爲等分1/n，所以使用百分比作爲寬度，但是也註定不能使用magin去填充邊距，只能使用padding，且在border-box的前提下。
3、h5頁面同時需要考慮按鈕中文案的長度以及屏幕的尺寸問題，應保證用戶在手機上看和在ipad上的效果一致。可以使用display:table-cell;的方式去實現。

代碼實現

<div class="line">
	<span class="label-container">
		<span class="label"><span class="content">1</span></span>
		<span class="label">><span class="content">2</span></span>
		<span class="label">><span class="content">3333333333</span></span>
		<span class="label">><span class="content">444444</span></span>
		<span class="label">><span class="content">555555555555555</span></span>
	</span>
</div>

.line{
	padding-left: 16px;
	.label-container{
		display: inline-block;
		box-sizing: border-box;
		width: 33.3%;
		height: 25px;
		padding:0px 16px 10px 0px;
		text-align: center;
		.label{
			position: relative;
			box-sizing: border-box;
			display: table-cell;
			/* 1%表示足夠大，會撐滿整個容器，這點需要留意，table-cell的方式默認會根據內容的長度而設置寬度 */
			width: 1%;
			height:32px;
			background:rgba(250,250,250,1);
			border-radius:20px;
			text-align: center;
			font-family:PingFangSC-Regular;
			font-weight:400;
			font-size:12px;
			vertical-align: middle;
			.content{
			/* 如果內容超出兩行以上則以...方式省略 */
				display: -webkit-box;
				padding: 0px 10px;
				text-overflow: ellipsis;
				-webkit-line-clamp: 2;
			    /* 下面的註釋是爲了打包時不忽略這句代碼 */				
				/*! autoprefixer: off */
				-webkit-box-orient: vertical;
				/*! autoprefixer: on */
				overflow: hidden;
			}
		} 
	}
}

二、堅持使用flex佈局

1、因爲彈性佈局會使得元素平分這個屏幕的寬度的緣故，若還要實現每行n個，不夠n個靠左對齊的效果，則需要填上空白的元素以補齊n個的要求。

代碼實現

// 未完待續。。。