<style> .wrap { width: 400px; display:flex; /*彈性盒子*/ justify-content: space-between; /*兩端對齊，子元素之間有間隙*/ flex-flow: row wrap;/*子元素溢出父容器時 ...

　　 前言 　　 在flex布局出現以前，我一般習慣使用浮動布局（float）來實現下列布局 　　 　　現在盡量少用浮動布局，雖然好用，但有時會帶來一些意想不到的問題，甚至導致布局錯位， 　 一開始浮動布局只是為了實現文字環繞而出現的，而后來卻被廣泛運用到布局當中。現在有了更好 ...

學習鏈接：https://blog.csdn.net/iefreer/article/details/50775887 ...

你的排版是這樣的 解決方法：追加一個空的子元素，子元素寬度保持一致 space-around設置同理 ...

justify-content 定義了flexbox flexbox內的元素在主軸的方向上的對齊方式。 它可以設置以下幾種對齊方式： 靠近一方 justify-content:center；　　/*flex元素都居中排列，沒有間距*/ justify-content:start ...

1、問題：遇到了設置了justify-content: space-between;中間的div不居中的問題 2、原因： 因為felx布局是根據剩余的空間來設置的，看紫色的那段，當第一個div為空時，會出現左傾 3、解決：三個子項設置flex:1;就好了 ...

space-around對齊時， 三個div之間的距離是與父邊框之間距離的【兩倍】 space-evenly對齊時，三個div之間的距離是與父邊框之間的距離 【相等】 spa ...

使用display: flex; justify-content: space-between; 在以后一行內容個數不夠時會導致樣式錯亂 只需要添加 class名::after{ 　　content:""; 　　添加子元素的寬 } ...