<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屬性，用來指定水平方向上 ...