彈性盒布局（display:flex）

彈性盒布局（Flexible Box）是一種十分方便的，只需要依賴于CSS的樣式就可以輕松實現響應式布局。彈性布局 flex 是CSS中 display 的一個屬性值，通過在父容器上添加 display:flex;屬性，便可以實現其子元素在父元素中的彈性布局，但要注意的是 display:flex; 這一條樣式只會作用在添加這一屬性的父容器和非隔代子容器上，換句話說，父容器上的 diaplay:flex; 屬性并不會使其直系子元素中的子元素產生彈性布局。                           

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