CSS彈性盒子被稱為Flexbox,其設計目標是為了能在屏幕大小和設備屏幕分辨率改變時,使頁面布局具有更強的適應性。在布局時,我們通過設置容器元素的display屬性為flex,來使該容器成為一個彈性盒子。
.container{ display: flex; }
接下來我們可以通過設置容器盒子的flex-direction屬性來控制容器內子元素的排列方向。默認該屬性值為row,表示子元素從左到右依次排列。設置為column時,表示子元素從上到下依次排列。
.container{ display: flex; flex-direction: column; }
在彈性盒子中,我們可以通過設置容器內子元素的flex屬性來控制它們的分配比例。設置為1的子元素,其將占用容器內所有設置為1的元素所占的比例。
.container{ display: flex; } .item{ flex: 1; }
默認情況下,Flexbox中的子元素只占據其所需的寬度空間。但是我們可以通過設置容器的屬性來使所有子元素占據容器內的全部可用空間。
.container{ display: flex; flex-wrap: wrap; } .item{ flex: 1 1 200px; }
以上為CSS彈性盒子的基本應用。其特有的布局方式可以解決傳統布局方法無法完全解決的問題。但是需要注意的是在使用Flexbox時,需要注意容器和子元素的屬性設置,防止出現不必要的布局問題。
下一篇jquery進度條加載