如果一行放不下就会自动换行
flex-wrap: wrap;
.box{
display: flex;
justify-content: space-between;//左右布局
width:300px;
height: 300px;
background: pink;
flex-wrap: wrap;
}
.child1 ,.child2{
background: red;
width: 100px;
height: 100px;
}
反方向换行,(2在上面,1在下面) flex-wrap: wrap-reverse;//反方向换行
.box{
display: flex;
justify-content: space-between;//左右布局
width:300px;
height: 300px;
background: pink;
flex-wrap: wrap-reverse;//反方向换行
}
.child1 ,.child2{
background: red;
width: 100px;
height: 100px;
}
在以上的方式上会出现换行的时候下面中间会有一段空格 ,
解决方式用 align-content: flex-start;//紧揍排列
.box{
display: flex;
justify-content: space-between;//左右布局
width:300px;
height: 300px;
background: pink;
flex-wrap: wrap;//换行
align-content: flex-start;//紧揍排列
}
.child1 ,.child2{
background: red;
width: 100px;
height: 100px;
}