flex平均分布并换行
2020-11-25 本文已影响0人
清霆
<!DOCTYPE html>
<html>
<head>
<meta charset="uft-8" />
<title>flex弹性布局</title>
<style>
.list {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.list:after {
content: ' ';
flex: auto;
}
.item {
height: 100px;
background-color: #1890ff;
margin-bottom: 10px;
}
.list .item {
margin-right: 10px;
width: calc((100vw - 10px * 4) / 5);
}
.list .item:nth-child(5n) {
margin-right: 0;
}
/*
$i: 5;
$marginRight: 10px;
.list .item {
margin-right: #{$marginRight};
width: calc((100vw - #{$marginRight} * (#{$i}-1)) / #{$i});
}
.list .item:nth-child(#{$i}n) {
margin-right: 0;
}
*/
</style>
</head>
<body>
<div class="list">
<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 class="item">12</div>
<div class="item">13</div>
</div>
</body>
</html>
