css3 上下两端对齐和左右两端对齐,经常用到,记录一下
左右两端对齐
<div class="main">
<div class="main_red"></div>
<div class="main_green"></div>
</div>
.main{
display: flex;
justify-content: space-between;
align-items: center;
width: 400px;
}
.main_red{
width: 100px;
height: 100px;
background: red;
}
.main_green{
width: 100px;
height: 100px;
background: green;
}
上下两端对齐
.main{
display: flex;
flex-wrap: wrap;
align-content: space-be