前言
在flex布局出現以前，我一般習慣使用浮動布局（float）來實現下列布局
現在盡量少用浮動布局，雖然好用，但有時會帶來一些意想不到的問題，甚至導致布局錯位，
一開始浮動布局只是為了實現文字環繞而出現的，而后來卻被廣泛運用到布局當中。現在有了更好的解決方案flex布局
問題
最近使用flex實現上面布局時出現了一個奇怪的問題，如下圖
正常情況是超出后換行並依次從左往右排列，而上圖是先左后右在中間，我使用了flex-wrap: wrap換行屬性，確認屬性無誤並且代碼沒有寫錯
后來幾經調試發現是justify-content屬性影響了
若給Tab標簽的父元素設置兩端對齊（justify-content:space-between），則會出現上述情況
若給Tab標簽的父元素設置水平居中（justify-content:center），則會出現下圖情況
解決
①：設置 justify-content:flex-start 然后調整tab標簽元素之間的間距即可
②：不給Tab標簽的父元素設置 justify-content屬性，給子元素tab設置 justify-content屬性