1.最外层父元素设置为弹性布局,子元素设置为 display:inline-block。
2.子元素的第二级的div根据条件判断是否显示(display:none)。
导致的问题:设置space-between.每一行的最后一个子元素距离最右边有一定的宽度。
原因:当内部元素(第2步)不显示的时候,子元素(第一步里的)应该也设置为display:none。
.father{
display:flex;
flex-wrap: wrap;
justify-content: space-between;
width:1000px
}
问题二:
flex布局,设置折行,总共有五个,如果设置为一行三个,第二行(最后一行)展示不好看。
解决办法:
.father::after{}
content:"";
width:'' // 子元素的宽度
height:0;
display:block;
}
网友评论