CSS justify-content佈局讓最後一行元素左對齊的兩種實用方式

justify-content 問題描述

在CSS fle佈局中，最後一行的元素個數不滿的時候，使用justify-content來實現某中對其方式的時候，我們發現在最後一行的元素是space-around或者space-between的樣式，而不是我們想要的左對齊。

如下代碼以space-around舉例：

.wrap {
	width: 300px;
	border: 1px solid skyblue;
	display: flex;		
	flex-wrap: wrap;
	justify-content: space-around;
}
.wrap div {
	width: 80px;
	height: 80px;
	margin: 10px;
	background: skyblue;
}

<div class="wrap">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>

可以看到最後一行的元素個數不夠，不是我們想要的效果。

使用margin自適應的方法解決

.wrap div:last-child {
 	/* 讓最後一個元素的右邊距自動適應，從而實現左對齊的效果。*/
	margin-right: auto; 
}

給最後一個元素設置margin-right取值爲auto，讓該元素的右邊距自適應剩餘空間。
控制檯查看最後一個子元素，可以明確的看到最後一個子元素會根據剩餘空間自動適應。

當我們隨機刪除某一個的時候最後一個元素的邊距會自動適應嗎？

.wrap {
	width: 300px;
	border: 1px solid skyblue;
	display: flex;		
	flex-wrap: wrap;
	justify-content: space-around;
}
.wrap div {
	width: 80px;
	height: 80px;
	margin: 10px;
	background: skyblue;
}
.wrap div:last-child {
	/* 讓最後一個元素的右邊距自動適應，從而實現左對齊的效果。 */
	margin-right: auto; 
}

<div class="wrap">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
</div>

let oDiv = document.querySelectorAll(".wrap div");
for (var i = oDiv.length - 1; i >= 0; i--) {
	oDiv[i].onclick = function() {
		this.remove();
	}
}

刪除某一個後，CSS樣式會自動映射到最後一個元素身上，效果還是我們想要的，所以沒問題。

如果子項的寬度在不確定的情況下呢

.wrap {
	width: 300px;
	border: 1px solid skyblue;
	display: flex;		
	flex-wrap: wrap;
	justify-content: space-around;
}
.wrap div {
	width: 80px;
	height: 80px;
	margin: 10px;
	background: skyblue;
}
.wrap div:last-child {
	/* 讓最後一個元素的右邊距自動適應，從而實現左對齊的效果。 */
	margin-right: auto; 
}

<div class="wrap">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
</div>

let oDiv = document.querySelectorAll(".wrap div");
for (var i = oDiv.length - 1; i >= 0; i--) {
	oDiv[i].style.width = rand(80, 30) + "px";
}

// 封裝隨機數
function rand(max, min) {
	return Math.floor( Math.random() * (max - min + 1) + min);
}

最後一子項設置margin-right: auto，最終效果如下：

使用CSS中after(僞元素)來實現最後一行的左對齊

.wrap {
	width: 300px;
	border: 1px solid skyblue;
	display: flex;		
	flex-wrap: wrap;
	justify-content: space-around;
}
.wrap div {
	width: 80px;
	height: 80px;
	margin: 10px;
	background: skyblue;
}
.wrap::after {
	content: "";
	display: block;
	flex: 1; /* 與flex: auto;等效都是自適應剩餘空間*/
}

<div class="wrap">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
</div>

效果如下：

控制檯查看僞元素，可以看到僞元素進行了佔位。