今天在學習彈性布局給專案新增交叉軸屬性align-items的時候出現了乙個問題：
當容器的寬度小於專案的寬度的時候(預設設定容器的flex-flow:row wrap)
會出現兩行元素之間出現空行的情況。
為專案設定align-items:center屬性時 空**況還存在
如果為專案設定align-content:center屬性時，空**況會取消
小結：
由於彈性布局交叉軸對齊方式預設是stretch 會導致裡面盒子內容出現空行的情況。
解決方法：
1.將父容器的高度進行改變（設定高度為兩個盒子的高度 而不是比兩個盒子高度疊加起來還高…）
2.為容器新增align-content:flex-start;
JS彈性布局
在css3彈性布局出現之前，主要應用的還是css2.0中的浮動布局方式。不過浮動布局方式有乙個明顯的弊端，就是會出現父元素高度塌陷這一情況。為了解決這一弊端，還需要清除浮動，才可以得到想要的布局。所以在css3中，出現了更加方便的彈性布局方式。彈性布局部分屬性的使用方式 display flex 定...
彈性布局flex小結
檢視css某個屬性的相容情況 calc 25 1px box sizing center box 向外擴充套件 box sizing border box 向內擴充套件 父級身上的屬性 display flex 新增瀏覽器字首 webkit postcss外掛程式 自動加字首 display web...
浮動布局出現的問題
浮動布局是存在這種問題的，當視窗縮小後右邊的部分會被擠到頁面底部。這個問題該怎麼解決呢？例如 css left right 解決方法是 將左右兩部分網頁的寬度設定為百分數。左邊 width 30 右邊 width 70 今天在設計網頁時遇到了乙個難題，大半天的時間才搞明白，左右網頁部分採用的是百分數...