html flex布局换行,flex布局中的换行究竟是怎么使用的？

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

图片布局实现测试1

*{padding: 0;margin: 0;}

html,body{

/*height: 100%;*/

background-color: #f1f2f3;

}

#wrap{

width: 100%;

display: -webkit-box;

display: -webkit-flex;

display: flex;

-webkit-box-orient: vertical;

-webkit-flex-flow: column;

flex-flow: column;

display: -webkit-box; display: -webkit-flex; display: flex;

background-color: #fff;

display:flex;

justify-content:center; /*水平*/

margin-top: 2em;

}

.pic_box{

width: 100%;

max-width: 100%;

display: -webkit-box; display: -webkit-flex; display: flex;

align-items:center; /*垂直*/

flex-wrap:wrap;/*超出宽度强制换行*/

}

.pic{

width: 30%;

max-width: 32%;

height: 8em;

max-height: 8em;

margin: 0.2em;

background-color: red;

-webkit-box-flex: 1; -webkit-flex: 1; flex:1;

}

图片布局实现1----使用流式布局