css3 从左到右自动换行和多行排列方式

 如果一行放不下就会自动换行

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;
}