1. 程式人生 > >伸縮盒布局

伸縮盒布局

最終 藍色 顯示 瀏覽器 ace 忽略 pre 演變 play

display:flex(註意:所有相關屬性都需要加-webkit-前綴)

#website ul:first-child {
display:-webkit-box;
box-pack:justify;
-webkit-box-pack: justify;

display:flex;
display:-webkit-flex;
justify-content: space-between;
-webkit-justify-content: space-between;
}

對於支持flex的布局,綠色代碼會進行重置,最終顯示綠色代碼 效果;
對於不支持flex的瀏覽器,執行藍色代碼,綠色代碼被忽略,最終顯示 藍色代碼效果。

註意:li中要加上clearfix類,清除 垂直方向外邊距重合。(不支持flex布局的瀏覽器,li設置的margin-top無效)

伸縮盒布局堪稱布局神器,有過3次演變歷史:
  09:box
  11:flexbox
  12:flex
box基本所有瀏覽器都支持,但是似乎已經淘汰。
flex是目前最新的屬性。

  

伸縮盒布局