網站建設中細節如何簡單快速布局

　　此文由深圳網站建設企業中企動力小編撰寫，轉載請注明出處。有需要深圳網站建設，高端網站建設，營銷型網站建設，企業網站建設，品牌網站建設，以及平面廣告設計服務的，請聯系中企動力深圳網站建設公司。

　　對于Display布局想必大家都有所了解，這個屬性用于定義建立布局時元素生成的顯示框類型。對于HTML等文檔類型，如果使用display不謹慎會很危險，因為可能違反HTML中已經定義的顯示層次結構。對于XML，由于XML沒有內置的這種層次結構，所有display是必要的。今天我們給大家分享一下網站建設中的Display簡單快速布局：

　　在以往的大多數網頁布局中，經常要用到浮動或定位、居中，為了實現這些效果，我們通常會用到CSS中display屬性+position屬性+float屬性來完成，但對于某些布局非常不方便，往往花費不必要的時間而達不到想要的效果，CSS3中新特性display：flex的出現，使我們能節省時間和優化代碼，并實現各種頁面簡單快速布局。Flex是FlexibleBox的縮寫，意為彈性布局，它的強大之處在為盒狀模型提供更大的靈活性。而且display：flex兼容大多數主流瀏覽器，有些瀏覽器使用時需要加上前綴，比如Webkit內核的瀏覽器，必須加上-webkit前綴。

　　在使用display：flex布局父元素容器為指定彈性盒子時，只需在父元素中設置：display：flex;而父元素中所包含的子元素的屬性float、clear和vertical-align是沒有效果的;而行內元素容器彈性盒子設置為display：inline-flex;彈性盒子有兩條軸，水平的主軸(橫軸)和垂直的交叉軸(縱軸)。默認橫軸為主軸，默認自左向右;縱軸為輔軸，默認自上而下。

　　在設置了display：flex的父元素上，常常會用到的有關彈性布局的屬性主要有flex-direction，flex-wrap，justify-content，align-items，align-content，這幾個屬性分別從主軸的方向、是否換行、子元素在主軸上的對齊方式、子元素在交叉軸上的對齊方式、子元素在多根軸線上的對齊方式來規定了子元素在父元素中的彈性，從而來達到所想實現的效果。

　　在定義了父元素為彈性盒子后子元素所擁有的屬性都有：order，flex-grow，flex-shrink，flex-basis，align-self。order規定了子元素出現的排列循序，值越小，排列越靠前，默認為0;flex-grow定義了子元素的放大比例，默認為0，表示即使父元素還有剩余空間也不放大該子元素。設父元素的寬度為500px，三個子元素寬度分別為100px，如果所有子元素的flex-grow的值為1，則如果父元素有剩余空間，子元素會等比例放大，即剩余出來的200/3分給三個子元素;如果是一個子元素flex-grow為1，一個為2，第三個為3，則三個子元素分別多分到，200*(1/6)，200*(2/6)，200*(3/6);flex-shrink定義了子元素的縮小比例，默認為1，當父元素空間不足時，如果各個條目的flex-shrink值均為1，則表明等比例縮小，如果為0，則表示不縮小。

　　此文由中企動力小編撰寫，轉載請注明出處。有需要深圳網站建設，高端網站建設，營銷型網站建設，企業網站建設，品牌網站建設，以及平面廣告設計服務的，請聯系中企動力公司。