div的自动填充

这种情况也是经常遇到的，以优酷网页为例，不确定视频或者图片有多少，每四个自动换行。主要原理是什么呢？

 

主要是运用了弹性布局的flex-wrap属性（记得给父元素设置宽高并给display:flex）

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一xie条轴线排不下，如何换行。

有三个属性：nowrap（默认）：不换行。wrap：换行，第一行在上方。wrap-reverse：换行，第一行在下方。

 

写到这里相信大家都已经有一个大致的了解了，基本架构就是：

css:

.app{

width:1100px

height:900px

display:flex;

 * 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行。*/
                flex-wrap: wrap;

/*ustify-content用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。默认值。项目位于容器的开头*/
                justify-content: flex-start;

}

.app>div{

width: 300px;
    height: 100px;

flex-basis: 300px;
    margin: 15px 5px 5px 5px;

/*flex-basis属性用于设置或检索弹性盒伸缩基准值。

}

html:

<div class='app'>

<div><div/>

<div><div/>

<div><div/>

<div><div/>

<div/>