flex——justify-content屬性引發的一個樣式問題

 

　　 前言

　　 在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屬性