彈性盒布局(display:flex)
彈性盒布局(Flexible Box)是一種十分方便的,只需要依賴于CSS的樣式就可以輕松實現響應式布局。彈性布局 flex 是CSS中 display 的一個屬性值,通過在父容器上添加 display:flex;屬性,便可以實現其子元素在父元素中的彈性布局,但要注意的是 display:flex; 這一條樣式只會作用在添加這一屬性的父容器和非隔代子容器上,換句話說,父容器上的 diaplay:flex; 屬性并不會使其直系子元素中的子元素產生彈性布局。
通俗來講,爹只能管得到自己的兒子、而管不到自己的孫子。如果想要在下一層中繼續使用彈性布局,我們可以在相應的子元素上再次添加 display:flex; 屬性來實現。彈性布局就像是在一個大盒子里擺放的幾個小盒子,各自相對獨立,其彈性盒的結構如圖6-39所示。 從上圖可以看出,彈性盒由容器,子元素和軸構成,并且默認情況下,子元素的排布方向與橫軸的方向是一致的。彈性盒模型可以用簡單的方式滿足很多常見的復雜的布局需求。它的優勢在于只要開發人員聲明布局應該具有的行為,而不需要給出具體的實現方式。瀏覽器就會負責完成實際的布局。該種方式的布局模型幾乎在主流瀏覽器中都得到來支持。