<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.BetweenList {
display: flex;
flex-wrap: wrap;
}
.BetweenList.col2 .item {
width: 49.5%;
background-color: #333;
height: 50px;
margin-bottom: 5px;
}
.BetweenList.col2 .item:not(:nth-child(2n)) {
margin-right: calc(1% / 1);
}
.BetweenList.col3 .item {
width: 33%;
background-color: #333;
height: 50px;
margin-bottom: 5px;
}
.BetweenList.col3 .item:not(:nth-child(3n)) {
margin-right: calc(1% / 2);
}
.BetweenList.col4 .item {
width: 24%;
background-color: #333;
height: 50px;
margin-bottom: 5px;
}
.BetweenList.col4 .item:not(:nth-child(4n)) {
margin-right: calc(4% / 3);
}
.BetweenList.col5 .item {
width: 12%;
background-color: #333;
height: 50px;
margin-bottom: 5px;
}
.BetweenList.col5 .item:not(:nth-child(8n)) {
margin-right: calc(8% / 14);
}
</style>
</head>
<body>
<h2>两端对齐2列</h2>
<div class="BetweenList col2">
<div class="item">额</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">6</div>
</div>
<hr>
<h2>两端对齐3列</h2>
<div class="BetweenList col3">
<div class="item">额</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
<hr>
<h2>两端对齐4列</h2>
<div class="BetweenList col4">
<div class="item">额</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
<hr>
<h2>两端对齐5列</h2>
<div class="BetweenList col5">
<div class="item">额</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
</div>
</body>
</html>
