html怎么从左到右排列,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;

}