Display簡單快速布局
2023-03-09 分類： 網(wǎng)站建設
在以往的大多數(shù)網(wǎng)頁布局中，經(jīng)常要用到浮動或定位、居中，為了實現(xiàn)這些效果，我們通常會用到CSS中display屬性 +position屬性 +float屬性來完成，但對于某些布局非常不方便，往往花費不必要的時間而達不到想要的效果，CSS3中新特性display: flex的出現(xiàn)，使我們能節(jié)省時間和優(yōu)化代碼，并實現(xiàn)各種頁面簡單快速布局。Flex是Flexible Box的縮寫，意為"彈性布局"，它的強大之處在為盒狀模型提供大的靈活性。而且display: flex兼容大多數(shù)主流瀏覽器，有些瀏覽器使用時需要加上前綴，比如Webkit內(nèi)核的瀏覽器，必須加上-webkit前綴。
在使用display: flex布局父元素容器為指定彈性盒子時，只需在父元素中設置：display：flex；而父元素中所包含的子元素的屬性float、clear和vertical-align是沒有效果的；而行內(nèi)元素容器彈性盒子設置為display：inline-flex；彈性盒子有兩條軸，水平的主軸（橫軸）和垂直的交叉軸（縱軸）。默認橫軸為主軸，默認自左向右；縱軸為輔軸，默認自上而下。
在設置了display: flex的父元素上，常常會用到的有關彈性布局的屬性主要有 flex-direction , flex-wrap , justify-content , align-items , align-content ，這幾個屬性分別從主軸的方向、是否換行、子元素在主軸上的對齊方式、子元素在交叉軸上的對齊方式、子元素在多根軸線上的對齊方式來規(guī)定了子元素在父元素中的彈性，從而來達到所想實現(xiàn)的效果。
在使用display: flex布局父元素容器為指定彈性盒子時，只需在父元素中設置：display：flex；而父元素中所包含的子元素的屬性float、clear和vertical-align是沒有效果的；而行內(nèi)元素容器彈性盒子設置為display：inline-flex；彈性盒子有兩條軸，水平的主軸（橫軸）和垂直的交叉軸（縱軸）。默認橫軸為主軸，默認自左向右；縱軸為輔軸，默認自上而下。
在設置了display: flex的父元素上，常常會用到的有關彈性布局的屬性主要有 flex-direction , flex-wrap , justify-content , align-items , align-content ，這幾個屬性分別從主軸的方向、是否換行、子元素在主軸上的對齊方式、子元素在交叉軸上的對齊方式、子元素在多根軸線上的對齊方式來規(guī)定了子元素在父元素中的彈性，從而來達到所想實現(xiàn)的效果。
在定義了父元素為彈性盒子后子元素所擁有的屬性都有：order，flex-grow，flex-shrink，flex-basis，align-self。order規(guī)定了子元素出現(xiàn)的排列循序，值越小，排列越靠前，默認為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，則表示不縮小。
新聞標題：Display簡單快速布局
本文地址：http://www.rwnh.cn/news25/242825.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、標簽優(yōu)化、品牌網(wǎng)站制作、網(wǎng)站導航、靜態(tài)網(wǎng)站、網(wǎng)站設計公司
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- 太原SEO網(wǎng)站建設_太原網(wǎng)絡推廣_太原哪家網(wǎng)站制作公司好 2023-03-09
- 企業(yè)網(wǎng)站建站需要注意的內(nèi)容 2023-03-09
- 為什么要看重網(wǎng)站著陸頁的設計一個頁面決定品位 2023-03-09
- 江蘇網(wǎng)站ICP備案流程-備案資料要求-域名備案要求 2023-03-09
- 成都網(wǎng)站開發(fā)基本流程及步驟介紹 2023-03-09
- 動力社區(qū)模板論壇如何更換 2023-03-09
- 網(wǎng)站推廣方法，網(wǎng)站宣傳方法，什么是Alexa？ 2023-03-09
- 企業(yè)網(wǎng)站域名怎么取，企業(yè)網(wǎng)站域名可以是個人的么 2023-03-09
- 成都優(yōu)化公司-日常的網(wǎng)站內(nèi)容更新應該如何做 2023-03-09
- 文章分頁鏈接需要讓搜索引擎抓取嗎 2023-03-09
- com和cn域名哪種比較好 2023-03-09
- 企業(yè)網(wǎng)頁制作從哪些方面發(fā)揮作用 2023-03-09
- 網(wǎng)站如何將seo結合營銷做推廣 2023-03-09
- PHP語言開發(fā)網(wǎng)站的特點和優(yōu)勢 2023-03-09
- 為什么有的企業(yè)做網(wǎng)絡營銷沒效果？ 2023-03-09
- 創(chuàng)新互聯(lián)分享企業(yè)網(wǎng)站推廣的有效果的渠道 2023-03-09
- 友情鏈接真的能提升關鍵詞排名嗎 2023-03-09
- 成都網(wǎng)站內(nèi)容相關性影響排名 2023-03-09
- 醫(yī)療網(wǎng)站內(nèi)容如何形成差異化 2023-03-09