一、前言
对于前端，多行二端对齐是个常见的需求，也非常简单，但多加几个限制条件就比较有意思
了。一个是完美的二端对齐（上端有个border做参照）、二个兼容ie9、三是有margin。
二、对于第一个，不考虑ie，有margin，自然是flex，示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多行二端对齐</title>
<style>
.main1 {
width: 50%;
margin: 0 auto;
margin-top: 100px;
border-top: 1px solid black;
overflow: hidden;
}
.container1 {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
margin-top: 20px;
margin-right: -3%;
}
.item1 {
/*box-sizing: border-box;*/
flex: 0 0 22%;
display: inline-block;
margin-top: 1%;
margin-right: 3%;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="main1">
<div class="container1">
<div class="item1"></div>
<div class="item1"></div>
<div class="item1"></div>
<div class="item1"></div>
<div class="item1"></div>
<div class="item1"></div>
<div class="item1"></div>
</div>
</div>
</body>
</html>
注意事项：单行有右边距可以直接用justity-content：space-between。但如果itme1超过一行并且数量不定，在最后一行出现item1不满一行的情况就不能用了。
关键代码：.container1 { margin-right: -3%; }，利用margin百分比相对于父元素的特性。
二、考虑ie，有margin，示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二端对齐</title>
<style>
.item {
display: inline-block;
width: 22%;
height: 100px;
background-color: pink;
margin: 0 3% 1% 0;
}
.main {
width: 50%;
margin: 0 auto;
margin-top: 100px;
border-top: 1px solid black;
overflow: hidden;
}
.container {
font-size: 0;
margin-top: 20px;
margin-right: -3%;
}
</style>
</head>
<body>
<div class="main">
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</body>
</html>
此方法和第一种flex没有本质的区别，但是具有兼容性。
网友评论