<style> .wrap { width: 400px; display:flex; /*弹性盒子*/ justify-content: space-between; /*两端对齐，子元素之间有间隙*/ flex-flow: row wrap;/*子元素溢出父容器时 ...

当一行有三个元素的时候直接加个伪类就行，三个以上就需要加占位元素了 <div class="hot-content"> 　　<div class="hotList"></div> 　　<div class="pick"></div> ...

使用display: flex; justify-content: space-between; 在以后一行内容个数不够时会导致样式错乱 只需要添加 class名::after{ 　　content:""; 　　添加子元素的宽 } ...

justify-content：space-around 左右边上有边距 justify-content：space-between 左右边上没有边距 ...

你的排版是这样的 解决方法：追加一个空的子元素，子元素宽度保持一致 space-around设置同理 ...

给外层容器添加一个伪类::after .类名::after{ content:'' ; width: 元素的占位宽度; } 　　 ...

display: flex; justify-content: space-between; flex-wrap: wrap; 导致最后一行出现两端对齐情况 ...

的Web布局。这是一个很厉害的东西，而其中有一个justify-content属性，用来指定水平方向上 ...