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

display:flex;justify-content: center;檢查側軸是否居中，比如古代豎着寫字，檢查字是否在每條竹簡的中央。 display:flex;align-items: center;檢查橫軸是否居中 ...

...

...

示例代碼如下： ...

有時，頁面內容太少，無法占滿一屏的高度，底欄就會抬高到頁面的中間。這時可以采用Flex布局，讓底欄總是出現在頁面的底部。 ...

給每個子元素添加 flex-shrink: 0; 父元素overflow:auto;實現子元素不壓縮，超出寬度展示滾動條 ...

在 flex 布局中，當有一個元素寬度過長時，另一個元素寬度會被壓縮， 如下圖： 解決辦法：在不想被壓縮的元素上加上樣式 flex-shrink: 0; 效果圖： ...